5
私は というモデルクラスを持っています。ObjectTypeA、ObjectTypeB、ObjectTypeCというモデルクラスがあります。私はこのような何かをしたいテンプレートでAngular2の動的テンプレート "transclusion"
export interface ComponentFactoryInterface {
static CreateComponent(obj: CommonSuperObject)
}
@Injectable()
export class ComponentFactory {
public static CreateComponent(obj: CommonSuperObject){
if (obj instanceof ObjectTypeA){
return ObjectComponentA()
}else if (obj instanceof ObjectTypeB){
return ObjectComponentB()
}
}
}
ComponentFactory.ts： も異なるコンポーネントを作成します渡されたオブジェクトの種類に基づいて工場ComponentFactory、があります。
main_template.html
<components>
<component *ngFor="#obj in objects">
<!-- insert custom component template here -->
</component>
</components>
関連コンポーネントを動的に挿入するにはどうすればよいですか？
私はこのような何か（それをやってのではない私の好ましい方法）行うことができます：
<components>
<!-- loop over component models -->
<custom-component-a *ngIf="models[i] instanceof ObjectTypeA">
</custom-component-a>
<custom-component-b *ngIf="models[i] instanceof ObjectTypeB">
</custom-component-b>
</components>
をしかし、これは多くのレベルで私には本当に間違っているようです（私はこのコードと工場出荷時のコードを変更する必要があります別のコンポーネントタイプを追加した場合）。
編集 - 実施例
constructor(private _contentService: ContentService, private _dcl: DynamicComponentLoader, componentFactory: ComponentFactory, elementRef: ElementRef){
this.someArray = _contentService.someArrayData;
this.someArray.forEach(compData => {
let component = componentFactory.createComponent(compData);
_dcl.loadIntoLocation(component, elementRef, 'componentContainer').then(function(el){
el.instance.compData = compData;
});
});
}
「ngSwitch」はオプションではありません。「DynamicComponentLoader」は、私が探しているもののように聞こえます。私はそれを見て、あなたに戻ってきます。 –
Phew！ほとんどの場合、私は新しく作成されたコンポーネントにプロパティを設定する必要があります。私は 'ComponentRef'バックで約束を得ていますが、私は実際に新しくロードされたコンポーネントのプロパティにアクセスする方法はわかりません。 （私の質問を更新して、私が何をしているのかを確認してください） –
さて、コンポーネントインスタンスは 'el.instance'と思われます。それを試して、まもなくあなたに戻ってきます。 –