以编程方式插入不同的 Angular2 组件

Question

我想以编程方式生成由来自 JSON 文件的多个不同组件组成的报告，例如：

{
    components: [UserStatsComponent, ActivityChartComponent, NetworkGraphComponent]
}

我发现了这个：但是我的用例不同，因为我需要表示不同类型的组件，所以我不能在我的模板中使用 ngFor，因为不是每个组件都有相同的指令。

我是 Angular2 的新手，所以我真的不知道如何处理这个问题：首先我想到了组件继承，但看起来在扩展组件的 class 时 angular2 注释不会被继承。也不知道怎么用composition解决这个问题

听说过有关内容标签的一些信息，但不确定它是否与此用例相关。

tldr；如何动态插入数组中的不同组件？

Answer 1

要动态插入组件，请使用 DynamicComponentLoader

@Component({
  selector: 'child-component',
  template: 'Child'
})
class ChildComponent {
}
@Component({
  selector: 'my-app',
  template: 'Parent (<child id="child"></child>)'
})
class MyApp {
  constructor(dcl: DynamicComponentLoader, injector: Injector) {
    dcl.loadAsRoot(ChildComponent, '#child', injector);
  }
}

以编程方式插入不同的 Angular2 组件

Insert different Angular2 components programmatically

inheritance

components

dynamic

composition

angular