组件可以调用自毁事件吗答案

【问题标题】：Can component invoke a self destroy event组件可以调用自毁事件吗
【发布时间】：2017-02-07 10:33:12
【问题描述】：

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

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

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

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

【问题讨论】：

标签： angular angular2-components

【解决方案1】：

如果您使用ViewContainerRef.createComponent() 添加组件，如Angular 2 dynamic tabs with user-click chosen components 所示，那么当您将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);
  }
}

【讨论】：

这是一个很好的解决方案，几天前我也需要这样的东西，我也做了同样的事情。不要认为目前有更好的方法来实现这一点。
@Günter Zöchbauer 你能说明如何在子组件的打字稿中使用“关闭”吗？我们将如何触发关闭事件？
无论如何要为角度 1 做这件事？
这不是这个问题的答案。这是一个让父级知道何时删除它的组件。当删除发生时它在父范围内......这不是自毁，这是用户所要求的（我来这里是为了什么）。
另外，它具有误导性。它说组件正在将组件引用传递给父级，这是不正确的。它只是发出一个父母必须订阅的事件。

【解决方案2】：

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

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

【讨论】：

这有点滑稽，但确实有效，而且似乎比公认的答案更合适。
分配什么给 viewContainerRef？
这正是我所需要的。我需要在 *ngComponentOutlet 中实例化的组件上单击“自毁”，这成功了！
如果您导入ElementRef，您可以在AfterViewInit 生命周期中执行以下操作：this.element.nativeElement.parentNode.removeChild(this.element.nativeElement);
它会让它消失，但是没有调用 ngOnDestroy 钩子所以不正确

【解决方案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
}

【讨论】：

它对我有用，但我不知道这是否是最佳做法
@ThPadelis 我也不确定这是否是最佳做法，但我不知道有任何缺点。你知道这会在哪里产生问题吗？
这个解决方案有什么缺点吗？我想使用它（没有找到更好的东西）:)
@JoeAllen 我一直在使用它。我还没有遇到过。
如果需要，它不会调用“ngOnDestroy”。而且，例如，如果一个监听器以“HostListener”开头，它也不会被删除。没有自动“退订”。