javascript - Angular 2 : how to iterate through templates

Question

所以我得到了这些组件，B类和C类具有不同的模板，如下所示。

@Component({})
export abstract class A {}

@Component({
    template: `BBBBBB`
})
export class B extends A{}

@Component({
    template: `CCCCCC`
})
export class C extends A{}

在我的主要组件中，我需要迭代 A 数组，并将其模板插入 HTML。

@Component({
    template: `
    <div>
    ...???...
    </div>
    `
})

export class MrModul {
    anArray: A[] = Array();
    constructor(){
        ...
        //filling up the Array
        ...
    }
}

所以我需要用“？？？”来填充这个地方使用适当的模板，当我迭代数组时，但我真的不知道如何。如果我使用选择器，我真的不知道该使用什么选择器。但是如果我使用 *ngFor 我不知道应该使用什么属性。
你们能帮我吗？谢谢!

奖金信息: 我们的目标是拥有像小部件系统这样的东西。您可以选择并添加随机类型的(我们称之为)小部件，它们将被放入一个新的 div 中。这就是数组的用途，用于存储新的小部件。

Answer 1

<ng-content *ngFor="let item of anArray">
  <my-a *ngIf="item.compo == 'a'></my-a>
  <my-b *ngIf="item.compo == 'b'></my-b>
  <my-c *ngIf="item.compo == 'c'></my-b>
</ng-content>