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

Question

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

HTML

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

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

例:

该length的items阵列是2所以在打字稿代码,然后我需要有这样的事情.

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是Component Class的导出名称.这通常是类型的,QueryList所以你基本上可以将它作为一个数组来处理并做必要的事情.

这只有AfterViewInit在组件挂钩后才可用.

这是你的ref 的Sample StackBlitz.