Доступ к нескольким зрителям с помощью @viewchild

Question

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

<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 и использования запросов списка.

Answer 1

Использование @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._results);
}

l̶i̶v̶e̶ ̶d̶e̶m̶o̶

Answer 2

Используйте декоратор @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