Angular 4 - 通过renderer2删除组件时未调用ngOnDestroy

Question

我使用renderer2和elementRef动态插入Angular组件。虽然这有效，但我有一个问题，即在删除组件时（通过删除父组件，或通过在renderer2上调用removeChild），组件的ngOnDestroy方法不会被调用。

您可以在此处查看示例，https://stackblitz.com/edit/angular4-hs37d2

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

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

请注意，例如代码 永远不会执行console.log('[FirstElComponent] ngOnDestroy')。这是一个问题，因为有些组件需要通知不再存在于DOM中。

如何手动将组件插入DOM，因此删除它会调用ngOnDestroy？