组件可以调用自毁事件

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()等所示角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);