Angular 13.3.0组件销毁后内存泄漏：JS堆内存持续增长求助

已确认取消Observable订阅仍存在内存泄漏，可从以下方向排查解决：

• 清理原生DOM事件监听器
  若组件通过原生JS添加了DOM事件（如window.addEventListener('scroll', ...)），Angular不会自动清理这类监听器，必须在ngOnDestroy中调用removeEventListener对应移除。注意要保证监听器的回调函数引用一致（避免使用匿名函数，否则无法匹配移除）。

• 销毁第三方库实例
  组件使用第三方UI库、图表库（如ECharts、Leaflet）或工具类时，需在ngOnDestroy中调用库的销毁方法。比如ECharts要调用chart.dispose()，地图库要销毁实例，否则库内部的引用会持有组件对象，阻止垃圾回收。

• 清除定时器
  组件内的setTimeout/setInterval需在ngOnDestroy中用clearTimeout/clearInterval清除。建议将定时器ID存储在组件属性中，方便销毁时批量处理：

  private timerId: number;
  
  ngOnInit() {
    this.timerId = setInterval(() => { /* 业务逻辑 */ }, 1000);
  }
  
  ngOnDestroy() {
    clearInterval(this.timerId);
  }
  

• 排查全局/服务中的引用残留
  检查是否有全局对象（如window）、单例服务缓存了组件实例或属性。比如服务用数组存储组件引用但未在组件销毁时移除，或组件将自身实例赋值给了全局变量，需在ngOnDestroy中清空这些引用。

• 统一管理RxJS订阅
  推荐使用takeUntil模式批量管理订阅，避免手动取消时遗漏：

  private destroy$ = new Subject<void>();
  
  ngOnInit() {
    someObservable.pipe(takeUntil(this.destroy$)).subscribe(() => { /* 业务逻辑 */ });
  }
  
  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
  

• 通过内存快照定位根源
  在Chrome DevTools的Memory面板中，选中已销毁的组件实例，查看Retainers标签，追踪持有该实例的对象（可能是全局变量、服务实例、未清理的事件监听器等），精准定位泄漏点。

• 清理组件间引用
  若父组件通过@ViewChild/@ViewChildren持有子组件引用，子组件销毁后需确认父组件清空了这些引用；兄弟组件间通过服务传递的组件引用，也要在销毁时移除。

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