Angular内存泄漏排查与正确取消订阅方案咨询

一、内存泄漏的核心原因 #

• 嵌套订阅无人清理：pollOmni方法里直接订阅了http.post，但这个订阅既没保存也没在组件销毁时取消。组件销毁后，这个订阅还会持续发起请求，占用内存。
• 无限流未终止：poll流用了repeat()，会无限重复执行。组件销毁时如果不取消这个订阅，它会一直循环，还会不断触发内部的HTTP请求订阅，双重泄漏。
• 流逻辑错误：callOmni = () => of(this.pollOmni())这种写法完全错误，pollOmni没有返回值，等于把undefined包装成Observable，导致内部的HTTP订阅脱离了外部poll流的管控，变成了独立的不受控订阅。

二、修复后的完整代码 #

import { Component, OnInit, OnDestroy } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { of, Subject } from 'rxjs';
import { delay, tap, mergeMap, repeat, takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  postId;
  // 用于触发取消订阅的信号Subject
  private destroy$ = new Subject<void>();

  // 修正callOmni，直接返回HTTP请求的Observable
  callOmni = () => this.http.post<any>('http://127.0.0.1:8084/api', { call: 'getinfo' });
  display = (response: any) => {
    this.postId = response;
    console.log(this.postId);
  };

  poll = of({}).pipe(
    mergeMap(_ => this.callOmni()),
    tap(this.display),
    delay(10),
    repeat(),
    // 绑定取消订阅信号
    takeUntil(this.destroy$)
  );

  constructor(private http: HttpClient) { } 

  ngOnInit() {      
    this.poll.subscribe({
      error: (err) => console.log('oops', err)
    });
  }

  ngOnDestroy() {
    // 触发取消订阅，终止所有绑定takeUntil的流
    this.destroy$.next();
    this.destroy$.complete();
  }
}

三、常用的正确取消订阅方法 #

• takeUntil操作符（推荐）：创建一个Subject，在ngOnDestroy时发送完成信号，所有需要管控的Observable都通过pipe(takeUntil(this.destroy$))绑定，一次操作就能取消所有订阅，适合多订阅场景。
• 手动保存Subscription：把订阅结果存在变量里，比如private pollSub: Subscription;，ngOnInit里this.pollSub = this.poll.subscribe();，ngOnDestroy里this.pollSub.unsubscribe();，适合单个订阅的简单场景。
• async管道：如果数据要绑定到模板，直接用{{ poll | async }}，Angular会自动在组件销毁时取消订阅，不需要手动处理，最省心。

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