Accéder à plusieurs enfants de vue en utilisant @viewchild

Question

J'ai créé un composant personnalisé que j'ai placé dans une boucle for ex.

<div *ngFor="let view of views">

     <customcomponent></customcomponent>

</div>

dont le résultat sera :

<customcomponent></customcomponent>
<customcomponent></customcomponent>
<customcomponent></customcomponent>

Je voudrais savoir comment je peux obtenir une référence à ces composants en utilisant la syntaxe @viewchild ou tout autre moyen lorsque le nombre de ces composants peut varier.

lorsque l'on peut donner un nom au composant, par exemple

<customcomponent #compID></customcomponent>

Je peux alors le référencer comme suit :

@ViewChild('compID') test: CustomComponent

Comment puis-je le référencer lorsque ce n'est pas le cas, par exemple en utilisant éventuellement un index ?

(Cette question ne concerne pas l'utilisation d'ElementRef comme dans d'autres questions posées précédemment, comme le montrent les réponses ci-dessous). Cette question concerne l'accès à plusieurs @ViewChild et l'utilisation de requêtes de liste.

Answer 1

Utilice @ViewChildren de @angular/core pour obtenir une référence aux composants

modèle

<div *ngFor="let v of views">
    <customcomponent #cmp></customcomponent>
</div>

composant

import { ViewChildren, QueryList } from '@angular/core';

/** Get handle on cmp tags in the template */
@ViewChildren('cmp') components:QueryList<CustomComponent>;

ngAfterViewInit(){
    // print array of CustomComponent objects
    console.log(this.components.toArray());
}

Démonstration en direct

Answer 2

Utilisez le décorateur @ViewChildren combiné à QueryList. Ces deux éléments sont issus de "@angular/core".

@ViewChildren(CustomComponent) customComponentChildren: QueryList<CustomComponent>;

Faire quelque chose avec chaque enfant, ça ressemble à : this.customComponentChildren.forEach((child) => { child.stuff = 'y' })

Vous trouverez de la documentation supplémentaire sur angular.io, notamment : https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#sts=Parent%20calls%20a%20ViewChild