Как назначить ссылку на динамический компонент в угловых 4

Question

Учитывая компонент, как мы можем динамически назначить ссылку на компонент примерно так:

<app-list-audit #LAref{{identifier}}></app-list-audit>

вместо

<app-list-audit #LAref2></app-list-audit>

Answer 1

Я бы не стал использовать ссылки на компоненты таким образом. Я могу сослаться на них, используя список запросов следующим образом:

import { Component, QueryList, ViewChildren } from '@angular/core';
import { AppListComponent } from './applist.component';

@Component({
    selector: 'app-root',
    template: `
    <app-list-audit></app-list-audit>
    <app-list-audit></app-list-audit>
    <app-list-audit></app-list-audit> `
})
export class AppComponent {
  @ViewChildren(AppListComponent) list: QueryList<AppListComponent>;
  compArr = [];

  ngAfterViewInit() {
    this.compArr = this.list.toArray();
  }
}

И затем вы можете использовать compArr для ссылки на все экземпляры компонентов в вашем шаблоне.

Answer 2

Если у вас есть список проверок в ngFor:

Вы можете использовать @ViewChildren с селектором компонента:

export class MyComoponent {
   @ViewChildren(ListAuditComponent) listAudits: QueryList<ListAuditComponent>;
}