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

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

@ SamAlexander können Sie this.components.toArray () verwenden, um das Array von Komponenten mit dem Namen

— #cmp

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

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

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