使用@viewchild访问多个viewchildren

149

我创建了一个自定义组件，将其放置在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

— 皮奥特·斯图林斯基
source

Answers:

244

使用@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̶

— 甲虫汁
source

它说._results是一个私有函数。还有这个。组件只是单个组件，而不是我的列表。您还可以提供其他帮助吗？

— 山姆·亚历山大

@SamAlexander，您可以使用this.components.toArray（）获得具有#cmp名称的组件数组

— DavidGSola，2017年

它如何在Ajax响应上工作？@ViewChildren是在初始化View之后触发的，但在模型（对于ngFor）更改后不会触发。我该如何触发？

— elporfirio

@elporfirio实现AfterViewChecked并编写方法ngAfterViewChecked。视图更新后，每个更改周期都会触发此方法。在其中，您可以测试是否已定义viewChild实例。查看文档

— BeetleJuice

没关系，我发现它可以更详细地解释事情：netbasal.com/…在@ViewChildren中使用组件的名称与使用在HTML中分配的#name所得到的返回结果不同。

— rmcsharry17年

将@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

— 沉默
source