角2コンポーネント多形

Question

私は動的に追加された子コンポーネントを持つコンテナのように機能するコンポーネントを実装したいと思います。子コンポーネントのタイプと数は、サーバー側で構成する必要があります。

だから、モデルがフォームサーバは次のようになります到着：

export class ModelBase { 
    public data: any; 
} 

export class ModelA extends ModelBase { 
    public dataA: any; 
} 

export class ModelB extends ModelBase {  
    public dataB: any 
} 

簡体コンポーネントは、このようなことができます：

@Component({ 
    selector: "component-base" 
}) 
export class BaseComponent { 
    @Input() model: ModelBase; 
} 

@Component({ 
    selector: "component-a", 
    template: "<div>component-a</div>" 
}) 
export class AComponent extends BaseComponent { 
    @Input() model: ModelBase; 
} 

@Component({ 
    selector: "component-b", 
    template: "<div>component-b</div>" 
}) 
export class BComponent extends BaseComponent { 
    @Input() model: ModelBase; 
} 

そしてここでは、アプリケーションとどのように私は私のコンポーネントで作業したいです：

@Component({ 
     selector: 'app', 
     template: ` 
      <div *ngFor="#model of models"> 
       <component-base [model]="model"></component-base> 
      </div> 
     ` 
}) 
export class App { 
} 

私は 'component-base'をコンクリートに置き換えたい「モデル」タイプに基づく実装。たとえば、コンポーネント-aを使用します。 このようなワークフローは角度2で実装できますか？

Answer 1

この機能のためのより良いAPIがあるかもしれません：https://github.com/angular/angular/pull/11235

一方、https://stackoverflow.com/a/36325468/5307109をチェックしてください。データを目的地コンポーネントに渡し、ロード時にカスタムコンポーネントフックを呼び出すことができるように、変更する必要があります。

上記のラッパーを使用すると、ComponentBaseは独自のテンプレートを持ち、各モデルの関連コンポーネントをラッパーに注入します。

export class ModelA extends ModelBase { 
    dataA: any; 
    component: any = AComponent; 
} 

@Component({ 
    selector: "component-base", 
    template: ` 
    <dcl-wrapper [type]="model.component" [init-data]="model"></dcl-wrapper> 
    ` 
}) 
export class BaseComponent { 
    @Input() model: ModelBase; 
} 

@Component({ 
    selector: "component-a", 
    template: "<div>component-a</div>" 
}) 
export class AComponent { 
    @Input() model: ModelBase; 

    /** 
    * Custom hook you might create in DclWrapper. 
    */ 
    onDclInit(model: ModelBase) : void { 
    this.model = model; 
    } 

}