使用@viewchild 访问多个 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 和使用列表查询有关。

149526 次浏览
小开

使用@ViewChildren 装饰符和 QueryList 组合，它们都来自“@angle/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

小开
最佳答案

使用 @angular/core中的 @ViewChildren获取对组件的引用

模板

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

我已经死了


提交答案