时间戳

首页 > 解决方案 > 使用代码从模板 ngFor 中生成的 DOM 中删除组件

angular - 使用代码从模板 ngFor 中生成的 DOM 中删除组件

问题描述

我有一个独特的场景，我需要创建子组件，这些子组件需要在创建时从我的后端获取一些信息。我的流程如下：

1）父组件的模板文件有一个*ngFor创建n个子组件

2）在子组件的创建指令中，我包括两个事件发射器来监听父组件（一个用于创建添加到数组，一个用于删除）

3) 当子组件启动时，我从后端收集该组件所需的内容，然后使用内部的创建事件发射器ngOnInit()通知父组件它已准备好。

4) 父组件然后将该子组件添加到其子数组中

5）在子组件中，有一个链接可以删除该子组件，该子组件也将该事件发送到父组件，父组件从数组中删除该实例。

以上所有内容都可以正常工作，但是当孩子传递删除事件时，我还需要从父模板中删除实际的 HTML。我在这里查看：Dynamicly ADDING and REMOVING Components in Angular，这是我需要的，但它假设子组件是在代码中生成的，而不是在模板中生成的。

我假设我需要使用类似的东西并将我的子组件引用添加到我的@ViewChild容器中，但我没有看到任何container允许我AddFromTemplate()等的方法。

这是一些代码：

父组件 (ts)：

export class MatParentComponent implements OnInit {
  constructor(private someService: SomeService) { }
  @ViewChild('container', { read: ViewContainerRef, static: false }) container: ViewContainerRef;
  // dunno how to use container in this example to add references to child components for removal from HTML later
  matChildComponents: MatChildComponent[] = [];

  addInstanceToCollection(matChildComponent: MatChildComponent): void {
    this.matChildComponents.push(matChildComponent);
  }
  removeInstanceFromCollection(matChildComponent: MatChildComponent): void {
    let i: number = 0;
    for (let i = 0; i < this.matChildComponents.length; i++) {
      if (this.matChildComponents[i] == matChildComponent) {
        console.log(i);
        this.matChildComponents.splice(i, 1);
        break;
      }
    }
  }


  ngOnInit() {
  }
}

及其对应的模板 HTML：

<mat-child *ngFor="let instance of instances"
            [someProp1]="instance.someProp1"
            [someProp2]="instance.someProp2"
            (instanceCreatedEmitter)="addInstanceToCollection($event)"
            (instanceRemoveEmitter)="removeInstanceFromCollection($event)"></mat-child>

子组件（ts）：

export class MatChildComponent implements OnInit {
  @Input() someProp1: string;
  @Input() someProp2: string;
  @Output() instanceCreatedEmitter = new EventEmitter<MatChildComponent>();
  @Output() instanceRemoveEmitter = new EventEmitter<MatChildComponent>();

  constructor() { }

  removeThisComponent(): void {
    this.instanceRemoveEmitter.emit(this);
  }

  ngOnInit() {
    // do my stuff from back end to fully load up this component
    this.componentLoaded = true;
    // now emit this instance back to the parent so they can add it to their collection
    this.instanceCreatedEmitter.emit(this);
  }
}

我应该使用这种@ViewChild()方法吗？还有什么我可以做的吗？发出删除事件后，我可以从自己的实现中删除子组件吗？IE：类似this.destroy().

TIA

标签： angulartypescriptangular-directiveangular-components

解决方案

想通了。在我上面绘制的图片中，我只需要从我的instances数组中删除我在父容器的 HTML 模板中循环的项目。

推荐阅读