angular – 使用@viewchild访问多个viewchildren

参见英文答案 > How can I select an element in a component template?10个
我已经创建了一个自定义组件,我将其置于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._results);
}

l̶i̶v̶e̶ ̶d̶e̶m̶o̶

相关文章

AngularJS 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...