使用@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 和使用列表查询有关。
使用 @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());
}
将 @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
AfterViewChecked并编写方法ngAfterViewChecked。在视图更新后的每个更改周期都会触发此方法。在其中，您可以测试是否已定义 viewChild 实例。 See the docs