เข้าถึง Viewchildren หลาย ๆ คนโดยใช้ @viewchild

Question 1

ฉันได้สร้างส่วนประกอบที่กำหนดเองซึ่งฉันวางไว้ใน for loop เช่น

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

     <customcomponent></customcomponent>

</div>

ผลลัพธ์จะเป็น:

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

ฉันต้องการทราบว่าฉันจะได้รับการอ้างอิงถึงส่วนประกอบเหล่านี้โดยใช้ไวยากรณ์ @viewchild หรือวิธีอื่น ๆ ได้อย่างไรเมื่อจำนวนส่วนประกอบเหล่านี้อาจแตกต่างกันไป

เมื่อส่วนประกอบสามารถตั้งชื่อได้เช่น

<customcomponent #compID></customcomponent>

จากนั้นฉันสามารถอ้างอิงได้ดังนี้:

@ViewChild('compID') test: CustomComponent

ฉันจะอ้างอิงได้อย่างไรในเมื่อไม่เป็นเช่นนั้นเช่นอาจใช้ดัชนี

(คำถามนี้ไม่เกี่ยวข้องกับการใช้ ElementRef ตามคำถามอื่น ๆ ที่ถามก่อนหน้านี้ดังที่เห็นได้จากคำตอบด้านล่าง) คำถามนี้เกี่ยวข้องกับการเข้าถึง @ViewChild หลายรายการและการใช้การสืบค้นรายการ

Question 2

ใช้@ViewChildrenจาก@angular/coreเพื่ออ้างอิงถึงส่วนประกอบ

แม่แบบ

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

ส่วนประกอบ

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̶

Question 3

ใช้มัณฑนากร @ViewChildren ร่วมกับ QueryList ทั้งสองอย่างนี้มาจาก "@ angular / core"

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

การทำอะไรกับเด็กแต่ละคนดูเหมือนว่า: this.customComponentChildren.forEach((child) => { child.stuff = 'y' })

มีเอกสารเพิ่มเติมที่ angular.io โดยเฉพาะ: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#sts=Parent%20calls%20a%20ViewChild