Typescript泛型类为Angular2组件

Question

是否可以将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... 
}

它甚至有意义吗？ 有没有替代实现这一目标？ 请赐教！

Answer 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 ）