angular - Hur skapar man en referens till en dynamiskt skapad komponent?

Jag kan inte hitta någonstans hur man skapar en referens till en komponent som jag skapar dynamiskt från en array?

HTML

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

Jag behöver ha tillgång till varje <my-component> (som kommer att skapas dynamiskt från arrayen) i TypeScript-koden

Exempel:

Längden på items-arrayen är 2. Så i TypeScript-kod behöver jag ha något liknande detta.

myComponent0 - referens till 1. <my-component>

myComponent1 - referens till den 2. <my-component>

Tack

Svar #1

Använd ViewChildren

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

export class AppComponent {

  @ViewChildren(MyComponent) components: QueryList<MyComponent>

  ...

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

  ...

}

Här är MyComponent det exporterade namnet på Komponentklassen. Detta är generellt av typen QueryList så du kan i princip behandla det som en array och göra det som behövs.

Detta kommer endast att vara tillgängligt efter AfterViewInit-kroken i komponenten.

Här är en Exempel StackBlitz för din referens.

Svar #2

Använd dekoratorn view children.

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

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