angular - Wie erstellt man eine Referenz zu einer dynamisch erstellten Komponente?

Ich kann nirgends finden, wie man eine Referenz zu einer Komponente erstellt, die ich dynamisch aus einem Array erstelle.

HTML

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

Ich muss Zugriff auf jedes <my-component> haben (das dynamisch aus dem Array erstellt wird) im TypeScript-Code

Beispiel:

Die length des items-Arrays ist 2. Also brauche ich im TypeScript-Code so etwas.

myComponent0 - Referenz auf das 1. <my-component>

myComponent1 - Referenz auf das 2. <my-component>

Danke

Antwort #1

Verwende ViewChildren

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

export class AppComponent {

  @ViewChildren(MyComponent) components: QueryList<MyComponent>

  ...

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

  ...

}

Hier ist MyComponent der exportierte Name der Komponentenklasse. Dies ist allgemein vom Typ QueryList, sodass Sie es im Wesentlichen wie ein Array behandeln und das Erforderliche tun können.

Dies wird erst nach dem AfterViewInit-Hook der Komponente verfügbar sein.

Hier ist ein Beispiel-StackBlitz für Ihre Referenz.

Antwort #2

Verwenden Sie den View-Children-Dekorator.

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

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