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

【问题标题】：remove component from DOM generated in template ngFor using code使用代码从模板 ngFor 中生成的 DOM 中删除组件
【发布时间】：2019-11-05 02:48:22
【问题描述】：

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

1) 父组件的模板文件有一个*ngFor，它创建了n个子组件

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

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

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

5) 在子组件中，有一个链接可以删除该子组件，该子组件也向父组件发出该事件，父组件从数组中删除该实例。

以上所有内容都可以正常工作，但是当孩子传递删除事件时，我还需要从父模板中删除实际的 HTML。我看了这里：Dynamically 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

【问题讨论】：

标签： angular typescript angular-directive angular-components

【解决方案1】：

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

【讨论】：