Angular2 : 템플릿을 반복하는 방법

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>