Truy cập nhiều viewchild bằng @viewchild

Question 1

Tôi đã tạo một thành phần tùy chỉnh mà tôi đã đặt trong vòng lặp for, ví dụ:

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

     <customcomponent></customcomponent>

</div>

Kết quả đầu ra sẽ là:

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

Tôi muốn biết cách tôi có thể tham chiếu đến các thành phần này bằng cú pháp @viewchild hoặc bất kỳ phương tiện nào khác khi số lượng các thành phần này có thể thay đổi

khi thành phần có thể được đặt tên, ví dụ:

<customcomponent #compID></customcomponent>

Sau đó tôi có thể tham khảo nó như sau:

@ViewChild('compID') test: CustomComponent

Làm thế nào để tôi tham chiếu nó khi đây không phải là trường hợp, ví dụ: có thể sử dụng một chỉ mục?

(Câu hỏi này không liên quan đến việc sử dụng ElementRef như các câu hỏi khác đã được hỏi trước đây khi có thể thấy câu trả lời được liệt kê bên dưới) Câu hỏi này liên quan đến việc truy cập nhiều @ViewChild và sử dụng các truy vấn danh sách.

Question 2

Sử dụng @ViewChildrenfrom @angular/coređể tham khảo các thành phần

bản mẫu

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

thành phần

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

bản thử trực tiếp

Question 3

Sử dụng trình trang trí @ViewChildren kết hợp với QueryList. Cả hai đều từ "@ angle / core"

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

Làm điều gì đó với mỗi đứa trẻ trông giống như: this.customComponentChildren.forEach((child) => { child.stuff = 'y' })

Có thêm tài liệu tại angle.io, cụ thể là: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#sts=Parent%20calls%20a%20ViewChild