Доступ до декількох переглядачів за допомогою @viewchild

Question 1

Я створив спеціальний компонент, який я помістив у цикл for, наприклад

<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