Angular 4：通过Renderer2移除组件时ngOnDestroy未触发

你遇到的这个问题其实很典型——当你直接用Renderer2和ElementRef操作DOM插入组件时，Angular并没有把这个组件纳入自己的组件实例管理树里。简单来说，Angular根本"不知道"这个组件存在，所以当你移除DOM节点时，自然不会触发它的生命周期钩子ngOnDestroy。

正确的做法：用Angular的组件工厂API管理动态组件 #

要让Angular能追踪组件实例并触发生命周期钩子，你需要使用ComponentFactoryResolver结合ViewContainerRef来创建和管理动态组件，而不是直接操作原生DOM。

下面是修改后的el-render.directive.ts代码，替换你原来的实现：

import { Directive, Input, ViewContainerRef, ComponentFactoryResolver, OnChanges, SimpleChanges } from '@angular/core';
import { DynamicComponent } from './dynamic.component'; // 你的动态组件

@Directive({
  selector: '[elRender]'
})
export class ElRenderDirective implements OnChanges {
  @Input() elRender: boolean;
  private componentRef;

  constructor(
    private viewContainerRef: ViewContainerRef,
    private componentFactoryResolver: ComponentFactoryResolver
  ) { }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.elRender.currentValue) {
      // 创建动态组件并插入到容器中
      const factory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);
      this.componentRef = this.viewContainerRef.createComponent(factory);
      // 如果需要给组件传值，可以这样做
      // this.componentRef.instance.someProperty = 'xxx';
    } else {
      // 移除组件，此时会触发ngOnDestroy
      if (this.componentRef) {
        this.componentRef.destroy();
        this.componentRef = null;
      }
      // 或者清空整个容器（适合多组件场景）
      // this.viewContainerRef.clear();
    }
  }
}

为什么原来的方式不行？ #

你之前的实现本质是直接把组件的原生DOM节点挂载到页面，但Angular的组件实例并没有被注册到它的变更检测和生命周期管理体系中。打个比方，就像你把一个文件放到文件夹里，但没告诉系统这个文件存在——系统自然不会在你删掉文件时执行相关的清理逻辑。

额外注意点 #

如果需要把组件插入到指定的非指令容器DOM位置，你可以先通过ViewContainerRef创建组件，再把组件的hostView移动到目标节点，但绝对不能脱离Angular的实例管理链，否则还是会出现生命周期钩子不触发的问题。

内容的提问来源于stack exchange，提问作者Martin Velinsky