Wie kann ich in einer Angular 2-Komponente auf untergeordnete Komponenten verschiedener Typen zugreifen?

Question

Sagen wir, ich habe eine Komponente, Carousel, die andere Komponenten einer Reihe von Typen enthalten kann, z. CarouselImage, CarouselText usw.

Ich möchte so etwas tun ...

type CarouselItem = CarouselImage | CarouselText; 

und dann in der Komponente

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

Dies ist jedoch nicht funktioniert. I undertsand das Folgende ist möglich ...

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

aber hier ist die Reihenfolge verloren.

Wie kann ich am besten auf die untergeordneten Komponenten zugreifen, ohne die Bestellung zu verlieren?

Answer 1

Wie wäre das:

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

Und dann haben Sie diese Schnittstelle in Ihrem CarouselImage und CarouselText so implementieren:

export class CarouselText implements CarouselItem{ 

    public getItem<CarouselText>:CarouselText{ 
    return this; 

    } 
} 

In Ihrem CarouselComponent können Sie einfach die getItem() aufrufen Funktion auf einen beliebigen Wert in der Liste.

definieren, die Liste wie folgt aus:

items:QueryList<CarouselItem>; 

Beispiel Füllung:

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

Wenn beide dieser Klassen implementieren die QueryItem Schnittstelle und Ihre Komponente ruft die Methode diese Schnittstelle hat, sollte es perfekt funktionieren ! Dies ist das Konzept der Schnittstellen und Generika.