使用@viewchild 访问多个viewchild

小编典典

使用@viewchild 访问多个viewchild

all

我创建了一个自定义组件，我将它放在一个 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
和使用列表查询有关。

阅读 82

2022-08-01

共1个答案

小编典典

使用@ViewChildrenfrom@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());
}

lii潭v潭e潭d潭d潭e潭mo潭

2022-08-01