@Viewchild kullanarak birden çok viewchild'e erişin

Bir for döngüsüne yerleştirdiğim özel bir bileşen oluşturdum, örneğin

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

     <customcomponent></customcomponent>

</div>

Çıktısı:

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

Bu bileşenlere @viewchild sözdizimi veya bu bileşenlerin sayısı değişebildiği zaman başka bir yol kullanarak nasıl referans alabileceğimi öğrenmek istiyorum

bileşene bir ad verilebildiğinde, örneğin

<customcomponent #compID></customcomponent>

Daha sonra aşağıdaki gibi referans verebilirim:

@ViewChild('compID') test: CustomComponent

Durum böyle değilse, örneğin bir indeks kullanarak nasıl referans verebilirim?

(Bu soru, aşağıda listelenen cevaplarda görülebileceği gibi, daha önce sorulan diğer sorularda olduğu gibi ElementRef'i kullanmakla ilgili değildir) Bu soru, birden fazla @ViewChild'e erişim ve liste sorgularının kullanılmasıyla ilgilidir.

Kullanım @ViewChildrengelen @angular/corebileşenlerine bir başvuru almak için

şablon

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

bileşen

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̶

@ViewChildren dekoratörünü QueryList ile birlikte kullanın. Bunların her ikisi de "@ angular / core" dan

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

Her çocukla bir şeyler yapmak şuna benzer: this.customComponentChildren.forEach((child) => { child.stuff = 'y' })

Angular.io adresinde , özellikle: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#sts=Parent%20calls%20a%20ViewChild