Angular路由切换时多订阅问题：如何正确销毁订阅？

问题根源 #

你的服务中combineLatest的订阅未被销毁，每次切换路由加载同一个子组件时，都会调用getEntities方法，导致服务中新增一个combineLatest订阅，这些未销毁的订阅不断累积，最终引发重复数据处理的问题。

解决方案 #

1. 重构服务：避免内部持有长期订阅

服务的核心职责是提供数据Observable，而非自行订阅并存储数据。修改服务代码，将数据Observable暴露给组件，由组件负责订阅与销毁：

// service.ts
import { BehaviorSubject, combineLatest, map, take } from 'rxjs';

private entitiesSubject$ = new BehaviorSubject<IEntity[]>([]);
private tasksSubject$ = new BehaviorSubject<ITask[]>([]);

// 对外暴露只读Observable
entities$ = this.entitiesSubject$.asObservable();
tasks$ = this.tasksSubject$.asObservable();

// 提供合并后的数据Observable，供组件直接订阅
combinedEntities$ = combineLatest([this.entities$, this.tasks$]).pipe(
  map(([entities, tasks]) => {
    // 在这里处理数据逻辑
    return processedEntities;
  })
);

getEntities(jobId: string, stage: string) {
  // 获取entities并更新Subject
  this.http.get<IEntity[]>(`/api/entities/${jobId}/${stage}`).pipe(
    take(1)
  ).subscribe(entities => {
    this.entitiesSubject$.next(entities);
  });

  // 获取tasks并更新Subject
  this.http.get<ITask[]>(`/api/tasks/${jobId}/${stage}`).pipe(
    take(1)
  ).subscribe(tasks => {
    this.tasksSubject$.next(tasks);
  });
}

2. 组件中手动管理订阅，销毁时取消

利用Angular的OnDestroy生命周期钩子，通过Subscription对象统一管理所有订阅，在组件销毁时一次性取消：

// component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

private subscriptions = new Subscription();

ngOnInit() {
  this._entityService.getEntities(this.jobId, this.selectedStage);
  
  // 订阅合并后的数据
  const dataSubscription = this._entityService.combinedEntities$.subscribe(entities => {
    this.entities = entities;
  });
  
  this.subscriptions.add(dataSubscription);
}

ngOnDestroy() {
  // 销毁所有订阅
  this.subscriptions.unsubscribe();
}

3. 使用async管道自动管理订阅（更简洁）

如果直接在模板中绑定Observable，使用async管道可以让Angular自动处理订阅的销毁，无需手动编写销毁逻辑：

<!-- component.html -->
<div *ngFor="let entity of _entityService.combinedEntities$ | async">
  {{ entity.name }}
</div>

额外优化：避免重复HTTP请求（可选）

如果相同jobId和stage的请求会重复触发，可以在服务中加入缓存逻辑，防止重复发起请求：

// service.ts
private requestCache = new Map<string, { entities$: Observable<IEntity[]>, tasks$: Observable<ITask[]> }>();

getEntities(jobId: string, stage: string) {
  const cacheKey = `${jobId}-${stage}`;
  
  if (!this.requestCache.has(cacheKey)) {
    const entities$ = this.http.get<IEntity[]>(`/api/entities/${jobId}/${stage}`).pipe(take(1), shareReplay(1));
    const tasks$ = this.http.get<ITask[]>(`/api/tasks/${jobId}/${stage}`).pipe(take(1), shareReplay(1));
    
    this.requestCache.set(cacheKey, { entities$, tasks$ });
    
    entities$.subscribe(entities => this.entitiesSubject$.next(entities));
    tasks$.subscribe(tasks => this.tasksSubject$.next(tasks));
  } else {
    const { entities$, tasks$ } = this.requestCache.get(cacheKey)!;
    entities$.subscribe(entities => this.entitiesSubject$.next(entities));
    tasks$.subscribe(tasks => this.tasksSubject$.next(tasks));
  }
}

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