Javascript 角度4-通过渲染器2删除组件时不调用Ngondestory

我正在使用renderer2和elementRef动态插入角度组件。虽然这样做有效，但我有一个问题，即在移除组件时（通过移除父组件，或通过在Render2上调用removeChild），不会调用组件的Ngondestory方法

你可以在这里看到一个例子

（插入和删除组件的代码位于el render.directive.ts中）

请注意，例如

console.log（“[FirstElComponent]ngondstroy”）

永远不会执行。这是一个问题，因为有一些组件需要被通知不再位于DOM中

---

如何将组件手动插入到DOM中，删除它将调用Ngondestory？

第一、第二和第三个组件在添加到DOM时不会被销毁。使用该按钮，您只需更改其隐藏和显示状态。当你更新代码时，stackblitz会重新创建整个DOM，所以你可以看到“first Distromed”，我可以看到它实际上是从DOM中删除的，这不仅仅是show/hideI建议使用另一种方法，你可以使用

ComponentRef

调用

destroy（）

方法进行组件引用，我认为不同的设计方法应该有助于@DanielCardenas，而不仅仅是删除DOM，这是一个很好的建议。不管怎么说，我投了赞成票。这是我曾经做过的stackblitz示例，请查看：

public ngAfterContentInit() {
  console.log('[ElRenderDirective] ngAfterContentInit');
  this.renderer.appendChild(this.element.nativeElement, this.elRender.nativeElement);
}

public ngOnDestroy() {
  console.log('[ElRenderDirective] ngOnDestroy');
  this.renderer.removeChild(this.element.nativeElement, this.elRender.nativeElement);
}