Question

我已经创建了一个自定义组件，我将其置于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和使用列表查询有关。

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

使用@viewchild访问多个viewchildren

2 个答案: