Angular2從對象列表渲染子組件

Question

我有一個實現了手風琴的登陸頁面。手風琴中的組的數量由定義屬性的對象列表（標題，活動等等）管理。手風琴的每個面板都包含一個特定的子組件。我想定義組這樣：

@Component({ 
    selector: 'aa-home', 
    template: require('./home.component.html'), 
    styles: [require('./home.component.scss')], 
    directives: [ACCORDION_DIRECTIVES, QUOTE_COMPONENTS] 
}) 
export class HomeComponent implements OnInit { 
    public oneAtATime: boolean = true; 
    public groups: AccordianGroup[] = []; 

    constructor() { 
     this.groups.push(new AccordianGroup(true, 'Quote', 'quote', '<aa-quote (response)="onContinue($event)"></aa-quote>')); 
     this.groups.push(new AccordianGroup(false, 'Introduction', 'intro', '<aa-intro (response)="onContinue($event)"></aa-intro>')); 
     this.groups.push(new AccordianGroup(false, 'Applicant Information', 'applicant', '<aa-applicant (response)="onContinue($event)"></aa-applicant>')); 
     this.groups.push(new AccordianGroup(false, 'Details', 'details', '<aa-details(response)="onContinue($event)"></aa-details>')); 
     this.groups.push(new AccordianGroup(false, 'Review', 'review', '<aa-review (response)="onContinue($event)"></aa-review>')); 
     this.groups.push(new AccordianGroup(false, 'Payment', 'payment', '<aa-payment (response)="onContinue($event)"></aa-payment>')); 
    } 

    ngOnInit() { 
     console.log(_.capitalize('starting home')); 
    } 

    onContinue(message): void { 
     let index = _.findIndex(this.groups, function(x) { return x.name === message.componentName; }); 
     if (index < this.groups.length - 1) { 
      this.groups[index].isActive = false; 
      this.groups[index + 1].isActive = true; 
     } 
    } 

    toggleActive(group): void { 
     this.groups.forEach(function(x) { x.isActive = false; }); 
     group.isActive = !group.isActive; 
    } 
} 

class AccordianGroup { 
    constructor(
     public isActive: boolean, 
     public title: string, 
     public name: string, 
     public template: string 
    ) { } 
} 

這樣的HTML：

<div *ngFor="let group of groups"> 
    <div class="accordion" (click)=toggleActive(group)>{{group.title}}</div> 
    <div class="panel" [ngClass]="{show: group.isActive}" [innerHTML]="group.template"></div> 
</div> 

這不工作...什麼都沒有呈現。這感覺就好像我正在以這種錯誤的方式進行，但我無法將其解決。這背後的想法是，取決於用戶...我需要篩選出一些組，並且真的......在HTML中沒有十幾個或更多的組中有完全相同的代碼，除了子組件被放置。這甚至有可能嗎？

Answer 1

您無法使用new創建組件。組件也可以通過角從HTML視圖中創建從ViewContainerRef.createComponent()

對於ViewContainerRef.createComponent()例如看到Angular 2 dynamic tabs with user-click chosen components（這是相當類似用途的情況下）

要創建標記組件構建的數據（模型）在父組件類中，然後使用AccordianGroup的選擇器來創建元素。

public groups: AccordianGroup[] = []; 
constructor() { 
    this.groups = [...]; 
... 
} 

<div *ngFor="let group of groups"> 
    <div class="accordion" (click)=toggleActive(group)>{{group.title}}</div> 
    <div class="panel" [ngClass]="{show: group.isActive}"><accordian-group [data]="group.data"></accordian-group></div> 
</div>