组件可以调用自毁事件吗

Question

我有一个父组件，单击链接即可打开一个新组件，这个新组件应该有一个关闭按钮，关闭时会向父组件发送关闭消息并销毁自身。

我们可以使用

ngOnDestroy

方法发送关闭消息，但是如何调用子组件的销毁。

<parent>
    <child></child> //child to be opened on click but close 
                    //event should be inside the child componenet
</parent>

如果我在这里有一些概念错误，请纠正我。谢谢

Answer 1

如果您使用

ViewContainerRef.createComponent()

添加组件，如 Angular 2 动态选项卡与用户单击选择的组件所示，那么当您将

cmpRef

传递给创建的组件时，该组件可以自行销毁。

否则我认为没有办法。您可以将值传递给父级，以便

*ngIf

删除该组件。

<child *ngIf="showChild" (close)="showChild = false"></child>

class ParentComponent {
  showChild:boolean = true;
}

class ChildComponent {
  @Output() close = new EventEmitter();

  onClose() {
    this.close.emit(null);
  }
}

Answer 2

这是另一种方法。这在组件本身内部起作用；无需与外部组件通信。

// imports
export class SelfDestroyableComponent implements OnInit {
    // other code

    constructor(private host: ElementRef<HTMLElement>) {}

    // whatEver function name you want to give 
    onCloseClicked() {
        this.host.nativeElement.remove();
    }

    // other code
}

Answer 3

不确定这种解决方案的清洁度，但我使用了：

this.viewContainerRef
    .element
    .nativeElement
    .parentElement
    .removeChild(this.viewContainerRef.element.nativeElement);

Answer 4

另一种销毁方式（假设使用

ViewContainerRef.createComponent()

创建的组件）是在子组件中创建一个主题并从父组件订阅它，即：

class ChildComponent {
  closeSubject = new Subject<boolean>();

  get closeObservable() {
    return this.closeSubject().asObservable();
  }

  deleteItself() {
    this.closeSubject.next(true);
  }
}
---
class ParentComponent() {
  // assuming you have something like: <ng-container #vcr></ng-container>
  @ViewChild('vcr', { static: true, read: ViewContainerRef })
  vcr: ViewContainerRef | undefined;
  
  createChildComponente() {
   ...
    const componentRef = this.vcr.createComponent(ChildComponent);
   // subscribe and destroy it
    componentRef.instance.closeObservable.subscribe((remove) => {
      if (remove) componentRef.destroy();
    })
  }

}