Uzyskaj dostęp do wielu widoków dzieci za pomocą @viewchild

149

Stworzyłem niestandardowy komponent, który umieściłem w pętli for np

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

     <customcomponent></customcomponent>

</div>

Rezultatem będzie:

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

Chciałbym wiedzieć, jak mogę uzyskać odniesienie do tych komponentów za pomocą składni @viewchild lub w inny sposób, gdy liczba tych składników może się różnić

gdy komponentowi można nadać nazwę np

<customcomponent #compID></customcomponent>

Następnie mogę się do tego odnieść w następujący sposób:

@ViewChild('compID') test: CustomComponent

Jak mam się do niego odwołać, gdy tak nie jest, np. Używając ewentualnie indeksu?

(To pytanie nie odnosi się do używania ElementRef, jak w przypadku innych pytań, które zostały wcześniej zadane, jak widać z odpowiedzi wymienionych poniżej) To pytanie dotyczy dostępu do wielu @ViewChild i korzystania z zapytań list.

angular Piotr Stuliński
źródło

Odpowiedzi:

244

Użyj @ViewChildrenz, @angular/coreaby uzyskać odniesienie do składników

szablon

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

składnik

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̶

Sok z żuka
źródło
3
mówi, że ._results jest funkcją prywatną. Także to. Komponenty to dla mnie tylko pojedynczy składnik, a nie lista. Czy możesz udzielić dodatkowej pomocy?
Sam Alexander
20
@SamAlexander możesz użyć this.components.toArray (), aby uzyskać tablicę komponentów o nazwie
#cmp
2
Jak to działa na odpowiedzi Ajax ?, @ViewChildren jest wyzwalane po init View, ale nie po zmianach modelu (dla ngFor). Jak mogę to wywołać?
elporfirio
1
@elporfirio zaimplementuj AfterViewCheckedi napisz metodę ngAfterViewChecked. Ta metoda jest wyzwalana podczas każdego cyklu zmian po zaktualizowaniu widoku. W jej ramach możesz sprawdzić, czy Twoja instancja viewChild została zdefiniowana. Zobacz dokumentację
BeetleJuice,
1
Nieważne, znalazłem to, co wyjaśnia sprawę bardziej szczegółowo: netbasal.com/… Użycie nazwy komponentu w @ViewChildren daje inny wynik niż użycie #name, które przypisałeś w HTML.
rmcsharry
75

Użyj dekoratora @ViewChildren w połączeniu z QueryList. Oba pochodzą z „@ angular / core”

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

Robienie czegoś z każdym dzieckiem wygląda tak: this.customComponentChildren.forEach((child) => { child.stuff = 'y' })

Dalszą dokumentację można znaleźć na angular.io, w szczególności: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#sts=Parent%20calls%20a%20ViewChild

silentsod
źródło