Question

我尝试搜索google和stackoverflow但找不到答案。所以我的问题很简单＆＃34;我如何在角度2,4和＃34;

中删除当前组件

示例：

<div (click)="remove($event)">Remove Current Component</div>

remove($event) {
    // this.destroy() ????
}

基本上我想要的是ComponentRef看到answer ngOnDestroy()调用this.cmpRef.destroy()：

ngOnDestroy() {
   if(this.cmpRef) {
     this.cmpRef.destroy();
   }    
}

但由于动态创建组件，他正在获得ComponentRef。

Answer 1

您可以在父模板中的组件元素上使用*ngIf="myBoolean"指令。当myBoolean变为false时，组件将被销毁。

不再存在组件或DOM元素。（并且ngOnDestroy事件已经提出）

如果myBoolean再次成为true，则会实例化新组件。

一个新的将出现在DOM（和ngOnInit事件引发）

您的点击事件可以发出一个事件（使用（myEventEmitter）语法在父项中绑定，然后父组件中的方法可以将布尔值设置为false。< / p>

this Plunker上的演示。如果它不符合您的需要，请考虑修改您的问题以提供更具体的详细信息，包括Minimal Complete Verifiable example

Answer 2

您可以使用nativeElement.remove()方法来物理删除元素。因此，您的代码可能如下所示：

@Component({
  selector: 'custom-element',
  template: `<h1 (click)="destroyMe()" >I am doomed to be deleted</h1>`,
  styles: []
})
export class CustomComponent  {

  constructor(private elementRef: ElementRef) {

  }

  destroyMe() {
    this.elementRef.nativeElement.remove();
  }
}

因此，销毁逻辑被封装在组件内部，您甚至可以将其用作单个自定义元素。有关更多详细信息，请参见 this example 。它基于Angular自定义元素，而不是Angular应用程序。

您正在寻找这种情况吗？

Angular2完全破坏当前组件

2 个答案: