角2は混合要素配列を示します

Question

私が達成したいのは、配列のすべての要素を表示することです。この配列にはさまざまなタイプのコンポーネント（yes、components）が含まれており、これらのコンポーネントはすべて抽象クラスから継承されています。ここに私のコードは次のとおりです。

抽象クラスプラグイン

export abstract class Plugin { 
constructor() { } 
} 

ウォッチコンポーネント

@Component({ 
selector: 'watch', 
template: ` 
    {{clock | async | date:'medium'}} 
` 
}) 

export class WatchCmpt extends Plugin { 
    clock = Observable.interval(1000).map(() => new Date()) 
    constructor() { 
     super(); 
    } 
} 

デモコンポーネント

@Component({ 
selector: 'demo', 
template: ` 
    <h1>Hello {{name}}</h1> 
` 
}) 

export class DemoCmpt extends Plugin { 
    name: string = "Jose"; 
    constructor() { 
     super(); 
    } 
} 

私は私の中でそれを表示するには、私の見解では、このコードを使用していますhtmlファイル：

<? *ngFor="let target of targetList; let x = index">{{target}} </?> 

<?>で何を使用しますか？ [demo, watch]

EDIT：

@Component({ 
    selector: 'dndPanel', 
    templateUrl: 'dragNdropPanel.cmpt.html' 
}) 

export class DragNDropPanelCmpt { 
    @ViewChild(DemoCmpt) demo1: DemoCmpt; 
    @ViewChild(WatchCmpt) watch: WatchCmpt; 

    constructor() { 
    } 

    targetList: Plugin[] = [ 
     this.demo1, 
     this.watch, 
    ]; 

    addTo($event: any) { 
     this.targetList.push($event.dragData); 
    } 
} 

これは、あなたがルータのコンセントで使用する必要があり、完全なHTML

div class="col-sm-6"> 
    <div class="panel panel-info" dnd-sortable-container [sortableData]="targetList"> 
     <div class="panel-heading">Target List</div> 
     <div class="panel-body" dnd-droppable (onDropSuccess)="addTo($event)" [dropZones]="['source-dropZone']"> 
      <ul class="list-group"> 
       <li *ngFor="let target of targetList; let x = index" class="list-group-item" dnd-sortable [sortableIndex]="x" [dragEnabled]="true"> 
        {{target}} 
       </li> 
      </ul> 
     </div> 
    </div> 
</div> 

Answer 1

ComponentFactoryを使用すると、私は必要な情報を得ることができました。私はthisウェブサイトで興味深い記事を見つけました。それは、私が望んでいたことを正確に行いました：ngSwitchや他のより複雑な（私にとって）タスクでハードコーディングすることなくリストから単一のビューで多くの異なるコンポーネントをレンダリングします。

すべての回答とコメントに感謝します。

Answer 2

ある

targetListは、このような配列です。

ルーターのアウトレットは、コンテナの出力をメインコンテナにroteするために使用されます。

コンセントをテンプレートスーパークラスに追加されたタグとして使用します。あなたがRouterについて読ん場合

<router-outlet></router-outlet> 

それは、ユーザーがアプリケーションのタスクを実行するよう

角度ルータは、次の1つのビューからのナビゲーションが可能になることを教えてくれます。

デザインコンポーネントの問題はオブジェクト指向であり、共通のオーバーライドインターフェイスを持ちません。したがって、コーディングは、特にカードレイアウトで、あるコンポーネントを別のコンポーネントに突き当てるのが少し難しくなります。

Answer 3

問題は、ジェネリックリストの中で具体的な要素を使用しようとしていることです。ジェネリックリストは、親抽象クラスによって定義されたAPIのように、その要素に対してのみ操作できます。

つまり、一覧にはタイプPluginのオブジェクトが含まれていると仮定できます。タイププラグインはコンポーネントではないので、子がコンポーネントであると仮定することはできません。 Angularはコンポーネントを拡張する素晴らしい方法を持っていないので、オブジェクト指向コンポーネントを作るあなたの考え方はうまくいかない。

例：

私はPluginを拡張する別のクラスを作成しますが、@Componentされていない場合は？リストはどのように非コンポーネントをレンダリングしますか？