Question

更新：我刚刚看了一下错误的Plunkr，这个Plunkr似乎适合我的用例：http://plnkr.co/edit/GJTLrnQdRDBvZenX59PZ?p=preview

我想动态创建组件，例如我有以下数组：

[
  { data: {...}, type: 'hello' },
  { data: {...}, type: 'foo' }
  ...
]

我希望迭代数组，并为每个我要创建相应组件的项目，在这种情况下，例如hello映射到类型HelloComponent和foo映射到类型FooComponent。

这个问题与：Angular 2 dynamic tabs with user-click chosen components有关，其中接受的答案提供了一个傻瓜： http://plnkr.co/edit/3dzkMVXe4AGSRhk11TXG?p=preview

app.ts看起来像：

 @Component({
 selector: 'my-app',
 providers: [],
 template: `
   <div>
     <h2>Dynamicaly Add Elements</h2>
     <button (click)="addItem()">add hello</button>
     <div #placeholder></div>
   </div>
 `,
 entryComponents: [HelloComponent, FooComponent]
})
export class App {
 @ViewChild('placeholder', {read: ViewContainerRef}) viewContainerRef;
 private componentFactory: ComponentFactory<any>;

 constructor(componentFactoryResolver: ComponentFactoryResolver, compiler: Compiler) {
   this.componentFactory = componentFactoryResolver.resolveComponentFactory(HelloComponent);
   //this.componentFactory = compiler.compileComponentSync(HelloComponent);
 }

 addItem () {
   this.viewContainerRef.createComponent(this.componentFactory, 0);
 }
}

我们动态创建了多个组件，但每个组件都是HelloComponent类型。添加多个不同组件的一种可能性是为每种类型设置一个工厂，在addItem我们将决定使用哪个工厂，但这看起来非常麻烦。

另一种选择是使用https://angular.io/docs/ts/latest/api/common/index/NgSwitch-directive.html（根本没有动态组件加载），但我们手动必须维护切换案例。

有更精益的方法吗？

Angular 2动态组件创建

0 个答案: