Angular组件执行OnDestroy后未释放内存问题咨询

针对组件销毁后内存无法释放、实例持续留存的问题，可通过以下方案解决：

1. 在组件销毁时主动清理Signal与副作用 #

利用Angular的ngOnDestroy生命周期钩子，切断Signal对大数组的引用，并清理相关副作用（如effect），让垃圾回收器能正常回收内存：

import { Component, OnDestroy, signal, effect } from '@angular/core';

@Component({
  selector: 'app-target-component',
  templateUrl: './target-component.component.html'
})
export class TargetComponent implements OnDestroy {
  array = signal<string[]>([]);
  private effectDestroyer?: VoidFunction;

  constructor() {
    // 若使用了effect，保存其销毁函数
    this.effectDestroyer = effect(() => {
      // 你的effect逻辑
      console.log('数组更新:', this.array());
    });
  }

  ngOnDestroy(): void {
    // 清理effect
    this.effectDestroyer?.();
    // 清空Signal数组，释放原大数组的内存引用
    this.array.set([]);
  }
}

2. 排查并移除外部强引用 #

检查是否有服务、父组件或全局代码持有组件实例的强引用（例如将组件存入全局列表、未取消的订阅绑定等）。若存在这类情况，需在ngOnDestroy中主动移除引用：

// 示例：若服务中存储了组件实例
constructor(private sharedService: SharedService) {
  this.sharedService.addComponentInstance(this);
}

ngOnDestroy(): void {
  this.sharedService.removeComponentInstance(this);
  // 其他清理操作...
}

3. 验证内存回收效果 #

修改完成后，通过浏览器DevTools内存面板验证：

• 多次切换组件显示/隐藏状态
• 手动触发垃圾回收（点击内存面板的垃圾桶图标）
• 确认组件实例数量不再持续增长

内容的提问来源于stack exchange，提问作者Jordan Ivanov