Angular 7 - Получить экземпляр компонента всех компонентов, объявленных в HTML

Question

Я создаю страницу, которая похожа на создателя форм.Пользователь будет щелкать и добавлять различные компоненты на страницу, что добавит записи в переменную "component" следующим образом:

Пример для Component1:

const childComponent = this.componentFactoryResolver.resolveComponentFactory(Component1);
this.components.push(childComponent);

Таким образом, массив компонентов будет иметьколлекция элементов ComponentFactory.

Затем я динамически и условно создаю компоненты в HTML следующим образом:

<div cdkDropList class="example-list" style="margin: 20px" (cdkDropListDropped)="drop($event)">
    <div cdkDrag *ngFor="let cmp of components">
        <ng-container *ngIf="cmp.componentType.name=='Component1'">
            <app-Component1></app-Component1>
        </ng-container>
        <ng-container *ngIf="cmp.componentType.name=='Component2'">
            <app-Component2></app-Component2>
        </ng-container>
        <ng-container *ngIf="cmp.componentType.name=='Component3'">
            <app-Component3></app-Component3>
        </ng-container>

    </div>
</div>

Работает пока отлично.Теперь, когда пользователь нажимает кнопку «Сохранить», он должен получить список всех компонентов на странице.В конце концов мне это нужно, так как компоненты доступны для редактирования, поэтому значения будут меняться.список «компонентов» нельзя использовать, поскольку он содержит только элементы Factory.

Возможно ли получить экземпляр компонента, который объявлен в HTML?Я пытаюсь @ViewChildren, но мне может понадобиться добавить его для каждого типа компонента, поэтому я не получу его в том порядке, в котором он был добавлен пользователем.

Наконец, я попытался создать компонент в кодеи затем добавьте его на страницу, используя ComponetFactoryResolver.Однако для каждого из них должна быть объявлена ​​директива «cdkDrag», что становится невозможным при таком подходе.

Спасибо.

Answer 1

При использовании цикла ссылочные переменные шаблона могут ссылаться на несколько элементов.

Это показано в в этом стеке , и, как вы можете видеть, оба элемента имеют правильный экземпляр класса.

Надеюсь, это поможет!

<ng-container *ngFor="let i of [0, 1]; last as isLast; first as isFirst">
  <hello *ngIf="isFirst" #child name="{{ name }}"></hello>
  <goodbye *ngIf="isLast" #child name="{{ name }}"></goodbye>
</ng-container>

<p>
  Start editing to see some magic happen :)
</p>

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  @ViewChildren('child') children: QueryList<any>;

  ngOnInit() {
    setTimeout(() => console.log(this.children.first), 1000);
    setTimeout(() => console.log(this.children.last), 1000);
  }
}

LOG

HelloComponent
    name: "Angular"
    __proto__: Object
GoodbyeComponent
    name: "Angular"
    __proto__: Object