Angular中使用renderer2.removeChild()移除DOM时如何取消子组件订阅？

这个问题我在项目里碰过好多次，核心原因很明确：你用Renderer2.removeChild()直接操作DOM的方式，绕开了Angular的组件生命周期管理机制。

Angular的组件实例和DOM节点是绑定的，但Renderer2.removeChild()只是单纯把DOM节点从页面上删掉，Angular的内部组件注册表完全不知道这件事——组件实例还好好待在内存里，自然不会触发ngOnDestroy钩子，订阅这类需要在销毁时清理的资源也就没法被关闭，时间长了很容易造成内存泄漏。

正确的解决思路：用Angular自带的组件管理API来销毁组件 #

Angular提供了ViewContainerRef和ComponentRef来帮我们管理动态组件的生命周期，用这套方案销毁组件时，Angular会自动触发ngOnDestroy，同时清理组件实例和对应的DOM节点。

下面是具体的实现示例：

1. 在父组件（AppComponent）中注入ViewContainerRef

import { Component, ViewContainerRef, ComponentRef } from '@angular/core';
import { HelloComponent } from './hello.component';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="createHelloComponent()">创建Hello组件</button>
    <button (click)="destroyHelloComponent()">销毁Hello组件</button>
  `
})
export class AppComponent {
  // 保存组件引用，方便后续销毁
  private helloCompRef: ComponentRef<HelloComponent> | null = null;

  constructor(private viewContainerRef: ViewContainerRef) {}

  // 创建Hello组件
  createHelloComponent() {
    // Angular 13及以上版本可以直接用createComponent创建组件
    this.helloCompRef = this.viewContainerRef.createComponent(HelloComponent);
    
    // 如果是Angular 12及以下版本，需要搭配ComponentFactoryResolver：
    // const factory = this.componentFactoryResolver.resolveComponentFactory(HelloComponent);
    // this.helloCompRef = this.viewContainerRef.createComponent(factory);
  }

  // 销毁Hello组件
  destroyHelloComponent() {
    if (this.helloCompRef) {
      // 调用destroy()会触发HelloComponent的ngOnDestroy，同时清理DOM和组件实例
      this.helloCompRef.destroy();
      this.helloCompRef = null;
    }
  }
}

2. 在HelloComponent中验证ngOnDestroy触发

import { Component, OnDestroy } from '@angular/core';
import { interval, Subscription } from 'rxjs';

@Component({
  selector: 'app-hello',
  template: `<p>Hello Component</p>`
})
export class HelloComponent implements OnDestroy {
  private subscription: Subscription;

  constructor() {
    this.subscription = interval(1000).subscribe(() => {
      console.log('Hello组件订阅正在执行');
    });
  }

  ngOnDestroy() {
    console.log('Hello组件的ngOnDestroy触发了');
    this.subscription.unsubscribe();
  }
}

为什么这套方案有效？ #

当你调用ComponentRef.destroy()时，Angular会：

• 触发组件的ngOnDestroy钩子
• 清理组件的依赖注入实例
• 从DOM中移除组件对应的节点
• 把组件实例从Angular的内部注册表中移除

这样就彻底完成了组件的销毁流程，不会留下内存泄漏的隐患。

内容的提问来源于stack exchange，提问作者nagu gudla