Pesquisa de site

typescript - Como posso acessar componentes filhos de diferentes tipos em ordem em um componente Angular 2?

Digamos que eu tenha um componente, Carousel, que pode conter outros componentes de um conjunto de tipos, por exemplo, CarouselImage, CarouselText, etc.

Eu quero fazer algo assim ...

type CarouselItem = CarouselImage | CarouselText;

e então no componente

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

No entanto, isso não funciona. Eu entendo que o seguinte é possível ...

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

mas aqui a ordem se perde.

Qual é a melhor maneira de acessar os componentes filhos sem perder a ordem?

Resposta #1

Que tal isso:

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

E então você precisa implementar essa interface no seu CarouselImage e CarouselText assim:

export class CarouselText implements CarouselItem{

  public getItem<CarouselText>:CarouselText{
    return this;

  }
}

No seu CarouselComponent, você pode simplesmente chamar a função getItem() em qualquer valor da lista.

Defina essa lista assim:

items:QueryList<CarouselItem>;

Exemplo de preenchimento:

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

Se ambas essas classes implementarem a interface QueryItem e seu componente chamar o método que essa interface possui, isso deve funcionar perfeitamente! Este é o conceito de interfaces e genéricos.

Artigos relacionados