Greifen Sie mit @viewchild auf mehrere Ansichtskinder zu

144

Ich habe eine benutzerdefinierte Komponente erstellt, die ich in eine for-Schleife eingefügt habe, z

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

     <customcomponent></customcomponent>

</div>

Die Ausgabe davon wird sein:

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

Ich würde gerne wissen, wie ich mithilfe der @ viewchild-Syntax oder anderer Mittel einen Verweis auf diese Komponenten erhalten kann, wenn die Anzahl dieser Komponenten variieren kann

wenn der Komponente ein Name gegeben werden kann, z

<customcomponent #compID></customcomponent>

Ich kann es dann wie folgt referenzieren:

@ViewChild('compID') test: CustomComponent

Wie verweise ich darauf, wenn dies nicht der Fall ist, z. B. wenn möglicherweise ein Index verwendet wird?

(Diese Frage bezieht sich nicht auf die Verwendung von ElementRef gemäß anderen Fragen, die zuvor gestellt wurden, wie aus den unten aufgeführten Antworten hervorgeht.) Diese Frage bezieht sich auf den Zugriff auf mehrere @ ViewChild und die Verwendung von Listenabfragen.

angular Piotr Stulinski
quelle

Antworten:

236

Verwenden Sie @ViewChildrenvon @angular/core, um einen Verweis auf die Komponenten zu erhalten

Vorlage

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

Komponente

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());
}

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

BeetleJuice
quelle
3
Es heißt, ._results ist eine private Funktion. Auch das. Komponenten ist nur eine einzelne Komponente, keine Liste für mich. Noch mehr Hilfe, die Sie leisten könnten?
Sam Alexander
19
@ SamAlexander können Sie this.components.toArray () verwenden, um das Array von Komponenten mit dem Namen
#cmp
2
Wie funktioniert es mit der Ajax-Antwort?, @ViewChildren wird nach der Init-Ansicht ausgelöst, jedoch nicht nach Modelländerungen (für ngFor). Wie kann ich das auslösen?
Elporfirio
@elporfirio implemet AfterViewCheckedund schreibe die Methode ngAfterViewChecked. Diese Methode wird bei jedem Änderungszyklus ausgelöst, nachdem die Ansicht aktualisiert wurde. Darin können Sie testen, ob Ihre viewChild-Instanz definiert wurde. Siehe die Dokumente
BeetleJuice
1
Egal , ich habe dies gefunden, was die Dinge ausführlicher erklärt: netbasal.com/… Die Verwendung des Namens der Komponente in @ViewChildren führt zu einem anderen Rückgabeergebnis als die Verwendung des in HTML zugewiesenen #Namens.
rmcsharry
72

Verwenden Sie den @ ViewChildren-Dekorator in Kombination mit QueryList. Beide sind von "@ angle / core"

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

Mit jedem Kind etwas zu tun sieht so aus: this.customComponentChildren.forEach((child) => { child.stuff = 'y' })

Weitere Informationen finden Sie unter angle.io, insbesondere unter https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#sts=Parent%20calls%20a%20ViewChild

silentsod
quelle