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

Question

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

HTML

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

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

示例:

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 钩子(Hook)之后可用。

---

这是一个 Sample StackBlitz供您引用。