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

Я создал пользовательский компонент, который я поместил в цикл 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 и использованию запросов списка.

Ответ 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.toArray());
}

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

Ответ 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#!#sts=Parent%20calls%20a%20ViewChild