Почему @ViewChildren выбирает шаблон только в первый раз?

Question

Я создаю приложение, в котором я хочу визуализировать кнопки внутри таблицы, используя компонент. Итак, я создал компонент, в котором сохранил шаблон кнопки и использую @ViewChildren, чтобы получить шаблон, и ViewContainerRef, чтобы применить компонент к шаблону. Однако устанавливается только первый ряд, а не другой. Я не могу понять причину этого? Вот что я пытался: https://stackblitz.com/edit/angular-rsxvbt

Answer 1

Ваше решение не работает, потому что вы используете одну ссылку с @ ViewChild , но вы находитесь внутри ng-For , поэтому вам нужно управлять QueryList ViewContainerRef с @ViewChildren.

Попробуйте изменить свой код следующим образом:

замените:

@ViewChild("dynamic", { static: false, read: ViewContainerRef }) ref;
@ViewChildren("dynamic") private button: QueryList<"dynamic">;

на:

@ViewChildren('dynamic', {read: ViewContainerRef}) public widgetTargets: QueryList<ViewContainerRef>;

, чтобы мы могли иметь ref для всех детей.

заменить:

ngAfterViewInit() {
    const componentFactory = this._componentFactoryResolver.resolveComponentFactory(
      HelloComponent
    );
    const ref = this.ref.createComponent(componentFactory);

  }

на:

ngAfterViewInit() {
    const targets = this.widgetTargets.toArray();
    for (let i = 0; i < targets.length; i++) {
        let target = targets[i];
        if(target) {
            let componentFactory = this._componentFactoryResolver.resolveComponentFactory(HelloComponent);
            let cmpRef: any = target.createComponent(componentFactory);
        }
    }
  }

, чтобы мы могли циклически перемещаться по нашему списку ссылок и создавать наш компонент на лету

рабочий стекблиц

Всего наилучшего.

Answer 2

Нет необходимости внедрять динамический компонент с помощью ComponentFactoryResolver. Вы можете внедрить свой компонент, используя его имя тега <hello></hello>. Я обновил ваш стек с рабочим решением: https://stackblitz.com/edit/angular-qbbewn