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 ）