组件可以调用自销毁事件

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);