动态选择的html模板中使用的Angular 2组件

Question

我正在尝试渲染一组html元素，但每个元素都依赖于数组中对象的类型。

我试图在Angular 2中这样做。

我的想法是我有一个项目类

interface Item {
  id: number;
  children: Item[];
}

class DataItem<Type> implements Item {
  public id: number;
  public children: Item[];
  public data: Type;
}

我有hierarchical-list这样的html模板。

<div class="hierarchical-list-node" *ngFor="let item of items">
  <custom-item-component [data]="item.data"></custom-item-component>
  <hierarchical-list *ngIf="item.children !== undefined"
      [items]="item.children"></hierarchical-list>
</div>

我希望项目类型以某种方式指定custom-item-component。所以我可以重用hierarchical-list组件，但以不同的方式呈现项目。

根据类型或其他参数，可能会对同一层次结构列表中的项目进行不同的渲染。