Question

我正在创建一个类似于表单创建者的页面。用户将单击并将不同的组件添加到页面中，从而将条目添加到“ component”变量中，如下所示：

Component1示例：

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

因此，components数组将具有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

使用循环时，模板引用变量可以引用多个项目。

这在this stackblitz中显示，您可以看到，两个元素都具有正确的类实例。

希望这会有所帮助！

<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);
  }
}

日志

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

Angular 7-获取以HTML声明的所有组件的组件实例

1 个答案:

日志