Angular中如何不使用ngOnDestroy或async pipe取消Observable订阅？

点击任意玩家名称时，Subject 会更新，Service 返回一个 Observable 并在组件中展示。希望在组件发起新订阅前取消之前的 Observable 订阅，询问是否有无需使用 ngOnDestroy 或 async pipe 的实现方式。

组件代码示例：

ngOnInit() {
    this.playersubscription = this.playerService
      .getSelectedPlayer()
      .subscribe((player) => {
        this.selectedPlayer = player;
        // this.playersubscription.unsubscribe(); 在此处取消会导致功能异常
      });
  }

Service 代码示例：

private selectedPlayer = new Subject<string>();

  getSelectedPlayer() {
    return this.selectedPlayer.asObservable();
  }

  updateSelectedPlayer(playerName: string) {
    this.selectedPlayer.next(playerName);
  }

方式1：使用 switchMap 操作符（推荐） #

如果实际场景是每次选中玩家后需要发起新的异步请求（比如HTTP调用），可以用 switchMap 自动取消前一次的订阅。调整组件代码如下：

import { switchMap } from 'rxjs/operators';

ngOnInit() {
  this.playerService.getSelectedPlayer()
    .pipe(
      // 每次有新的玩家名称时，自动取消前一次的异步请求订阅
      switchMap(playerName => this.playerService.getPlayerDetails(playerName))
    )
    .subscribe(playerDetails => {
      this.selectedPlayer = playerDetails;
    });
}

switchMap 会在源 Observable（这里是 getSelectedPlayer()）发出新值时，自动取消前一个由它映射出的 Observable 的订阅，完全符合“发起新订阅前取消旧订阅”的需求，且无需手动管理订阅。

方式2：手动管理订阅变量 #

如果只是单纯需要在每次重新订阅前取消旧订阅，可以在订阅前先检查并取消已有订阅：

import { Subscription } from 'rxjs';

private playersubscription: Subscription | null = null;

// 假设点击玩家的触发方法为selectPlayer
selectPlayer(playerName: string) {
  // 先取消之前的订阅
  this.playersubscription?.unsubscribe();
  // 发起新订阅
  this.playersubscription = this.playerService.getSelectedPlayer()
    .subscribe(player => {
      this.selectedPlayer = player;
    });
}

注意：如果 getSelectedPlayer() 是持续发出值的 Subject，这种方式会导致每次点击后只能收到一次新值（取消订阅后无法再监听后续 next() 事件），因此更适合单次发射的 Observable（比如HTTP请求）。

补充说明 #

你之前在 subscribe 回调里调用 unsubscribe() 导致功能异常，是因为一旦取消订阅，后续 Subject 的 next() 事件就无法再被监听，所以不能在回调内直接取消订阅。

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