如何在Angular 2组件中按顺序访问不同类型的子组件？

Question

假设我有一个组件Carousel，它可以包含一组类型的其他组件，例如CarouselImage，CarouselText等。

我想做这样的事......

type CarouselItem = CarouselImage | CarouselText;

然后在组件中

@ContentChildren(CarouselItem) items: QueryList<CarouselItem>;

然而，这不起作用。我不确定以下是可能的......

@ContentChildren(CarouselImage) imgItems: QueryList<CarouselImage>;
@ContentChildren(CarouselText) txtItems: QueryList<CarouselText>;

但是订单丢失了。

在不丢失订单的情况下访问子组件的最佳方法是什么？

Answer 1

怎么样：

export interface CarouselItem{
  public getItem<T>():T;
}

然后你必须在你的CarouselImage和CarouselText中实现那个接口：

export class CarouselText implements CarouselItem{

  public getItem<CarouselText>:CarouselText{
    return this;

  }
}

在CarouselComponent中，您只需对列表中的任何值调用getItem（）函数。

定义那样的列表：

items:QueryList<CarouselItem>;

填写示例：

items.push(new QueryText());
items.push(new QueryImage());

如果这两个类都实现了QueryItem接口并且你的组件调用了这个接口所拥有的方法，那么它应该是完美的工作！这是接口和泛型的概念。