Accéder à plusieurs visualiseurs à l’aide de @viewchild

J’ai créé un composant personnalisé que j’ai placé dans une boucle for, par exemple

Le résultat sera:

    

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 le composant peut recevoir un nom, par exemple

  

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 de ElementRef comme pour les autres questions précédemment posées, comme le montrent les réponses ci-dessous) Cette question concerne l’access à plusieurs requêtes @ViewChild et à la liste.

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

modèle

 

composant

 import { ViewChildren, QueryList } from '@angular/core'; /** Get handle on cmp tags in the template */ @ViewChildren('cmp') components:QueryList; ngAfterViewInit(){ // print array of CustomComponent objects console.log(this.components._results); } 

l̶i̶v̶e̶ ̶d̶e̶m̶o̶

Utilisez le décorateur @ViewChildren combiné avec QueryList. Les deux proviennent de “@ angular / core”

@ViewChildren(CustomComponent) customComponentChildren: QueryList;

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

Il y a plus de documentation à avoir sur angular.io, en particulier: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#sts=Parent%20calls%20a%20ViewChild