我试图渲染一个层次的html元素集,但每个元素将取决于数组中对象的类型 .

我试图在Angular 2中做到这一点 .

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

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

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

我有一个像_647107这样的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 组件,但以不同的方式呈现项目 .

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