组件可以调用自毁事件吗

Question

我有一个父组件，它在单击 link 时打开一个新组件，这个新组件应该有一个关闭按钮，该按钮在关闭时向父组件发送关闭消息并自行销毁。

我们可以使用ngOnDestroy方法发送关闭消息，但是我如何调用子组件的销毁。

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

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

Answer 1

如果您使用 ViewContainerRef.createComponent() 添加一个组件，如所示，那么当您将 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

不确定这种解决方案是否干净，但我使用了：

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

Answer 3

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

// 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
}

组件可以调用自毁事件吗

Can component invoke a self destroy event

angular2-components

angular