Question

在任何地方都找不到如何创建对从数组动态创建的组件的引用？

HTML

<div *ngFor="let item of items">
    <my-component [data]="item.data"></my-component>
</div>

我需要访问TypeScript代码中的每个<my-component>（将从数组动态创建）

示例：

length数组的items是2。因此，在TypeScript代码中，我需要具有类似的内容。

myComponent0-引用1. <my-component>

myComponent1-引用2。<my-component>

谢谢

Answer 1

使用ViewChildren

import { ViewChildren, QueryList, ... } from '@angular/core';

export class AppComponent {

  @ViewChildren(MyComponent) components: QueryList<MyComponent>

  ...

  ngAfterViewInit() {
    this.components.forEach(componentInstance => console.log(componentInstance));
  }

  ...

}

此处MyComponent是组件类的导出名称。通常，它的类型为QueryList，因此您可以将其视为一个数组并做有需要的事情。

这仅在组件的AfterViewInit钩之后可用。

这是您推荐的Sample StackBlitz。

Answer 2

使用视图儿童装饰器。

<div *ngFor="let item of items">
    <my-component [data]="item.data" #components></my-component>
</div>

@ViewChildren('components') components: QueryList<MyComponent>;

如何创建对动态创建的组件的引用？

2 个答案: