Angular 5组件销毁后仍监听订阅问题求助

这个问题我碰到过好多次了——本质是组件销毁后订阅没有被清理，导致旧组件实例还在监听GlobalVarsService里的selectedDepartment$推送，属于典型的内存泄漏问题。BehaviorSubject是持续推送的热Observable，只要订阅存在，不管组件是否还在DOM中，都会触发回调逻辑，跳转多次页面后就会堆积多个无效订阅。

下面给你三种常用的解决方案，按推荐程度排序：

1. 使用takeUntil操作符（推荐，适合多订阅场景） #

这种方法可以统一管理组件内的所有订阅，在组件销毁时一次性取消所有订阅：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { GlobalVarsService } from './path-to-your-service';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html'
})
export class MyComponent implements OnInit, OnDestroy {
  // 定义一个用于触发取消订阅的Subject
  private destroy$ = new Subject<void>();

  constructor(private globalVarsService: GlobalVarsService) {}

  ngOnInit() {
    this.globalVarsService.selectedDepartment$
      .pipe(takeUntil(this.destroy$)) // 加上这个操作符
      .subscribe(selectDepartment => {
        this.refreshReportData();
      });
  }

  ngOnDestroy() {
    // 组件销毁时发出信号，取消所有关联订阅
    this.destroy$.next();
    this.destroy$.complete();
  }

  private refreshReportData() {
    // 你的业务逻辑
  }
}

原理：takeUntil会监听destroy$的信号，一旦destroy$发出值，就会自动取消当前订阅，完美适配组件的生命周期。

2. 使用Async管道（最简洁，Angular官方推荐） #

Async管道会自动帮你管理订阅的创建和销毁，无需手动写取消逻辑：

组件类代码： #

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
import { GlobalVarsService } from './path-to-your-service';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html'
})
export class MyComponent implements OnInit {
  selectedDepartment$: Observable<number>;

  constructor(private globalVarsService: GlobalVarsService) {}

  ngOnInit() {
    this.selectedDepartment$ = this.globalVarsService.selectedDepartment$
      .pipe(tap(departmentId => this.refreshReportData(departmentId)));
  }

  private refreshReportData(departmentId: number) {
    // 你的业务逻辑，这里可以拿到最新的departmentId
  }
}

模板代码： #

<!-- 用Async管道订阅Observable，Angular会自动处理销毁 -->
<ng-container *ngIf="selectedDepartment$ | async"></ng-container>

原理：当组件销毁时，Angular会自动取消Async管道创建的订阅，完全不用你操心内存泄漏的问题。

3. 手动保存Subscription并取消（适合单个订阅场景） #

如果你的组件只有这一个订阅，也可以手动保存订阅实例，在销毁时取消：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { GlobalVarsService } from './path-to-your-service';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html'
})
export class MyComponent implements OnInit, OnDestroy {
  // 保存订阅实例
  private departmentSubscription: Subscription;

  constructor(private globalVarsService: GlobalVarsService) {}

  ngOnInit() {
    this.departmentSubscription = this.globalVarsService.selectedDepartment$
      .subscribe(selectDepartment => {
        this.refreshReportData();
      });
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅
    if (this.departmentSubscription) {
      this.departmentSubscription.unsubscribe();
    }
  }

  private refreshReportData() {
    // 你的业务逻辑
  }
}

这种方法的缺点是如果有多个订阅，需要维护多个Subscription变量，不如takeUntil方便。

为什么会出现这个问题？ #

BehaviorSubject是热Observable，它会持续向所有活跃的订阅者推送最新值。当你导航离开组件时，组件实例虽然被销毁，但如果没有取消订阅，这个订阅关系依然存在，所以每次selectedDepartment更新时，旧组件的refreshReportData()还是会被调用，跳转多次后就会有多个旧实例在后台运行，既浪费性能又可能导致奇怪的bug。

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