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

时间:2019-06-22 16:28:00

标签: angular typescript angular-directive angular-components

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

1)父组件的模板文件具有一个*ngFor,可创建n个子组件

2)在子组件的创建指令中,我包括两个事件发射器以监听父级(一个用于创建添加到数组,一个用于删除添加)

3)旋转子组件时,我从后端收集该组件所需的东西,然后从ngOnInit()内部使用创建事件发射器通知父组件已准备就绪。

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

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

以上所有方法均正常运行,但是当孩子通过remove事件时,我还需要从父模板中删除实际的HTML。我在这里查看:Dynamically ADDING and REMOVING Components in Angular,这是我所需要的,但它假定子组件是在代码中生成的,而不是在模板中生成的。

我假设我需要使用与之类似的东西,并将子组件引用添加到我的@ViewChild容器中,但是我没有看到container上允许我{{1} }等。

以下是一些代码:

父项(ts):

AddFromTemplate()

及其相应的模板HTML:

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() {
  }
}

子组件(ts):

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

我应该使用这种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); } } 方法吗?还有什么我可以做的吗?发出移除事件后,能否从子组件中移除子组件? IE:类似@ViewChild()

TIA

1 个答案:

答案 0 :(得分:0)

解决了这个问题。在上面绘制的图片中,我只需要从我在父容器的HTML模板中循环的instances数组中删除该项目即可。