Typescript 泛型类作为 Angular2 组件答案

【问题标题】：Typescript generic class as Angular2 componentTypescript 泛型类作为 Angular2 组件
【发布时间】：2017-04-10 18:40:46
【问题描述】：

是否可以使用 Typescript 模板/泛型类作为 Angular2 组件？如果是的话，你能给我/给我一个示例代码吗？

进一步阐述我的问题：我想在我的应用程序中显示多个列表。它们在视觉/功能上是相同的，但基本上是不同类型的列表，例如IFruits、IVegetables、IGrains 等。所以，我一直在考虑制作一个有点像这样的组件：

@Component({
  selector: 'my-list-display',
})
export class MyListDisplayComponent<T> {
  private list: T[];

  // further code to display and perform operations on list... 
}

这有意义吗？有没有替代方法来实现这一目标？请赐教！

【问题讨论】：

generic class as component 太宽泛了，能具体点吗。

标签： angular templates generics typescript

【解决方案1】：

如果您想指出属性list 是多种类型之一，我知道有几个选项。您可以创建一个类似ListItem 的接口，由多个类实现。您还可以创建一个abstract class ListItem，其中有多个类extend/implement。例如

export abstract class ListItem {
  public name: string;
}

export class Fruit implements ListItem {
  public name: string;
}

export class Vegetable extends ListItem {
}


@Component({
  selector: 'my-list-display',
})
export class MyListDisplayComponent {
  private list: ListItem[];

  // further code to display and perform operations on list... 
}

使用接口会类似

export interface ListItem {
  name: string;
}

export class Fruit implements ListItem {
  public name: string;
}

@Component({
  selector: 'my-list-display',
})
export class MyListDisplayComponent {
  private list: ListItem[];

  // further code to display and perform operations on list... 
}

如果Fruit 类实际上是FruitComponent，则用法相同（即FruitComponent implements ListItem）

【讨论】：