Angular组件执行unsubscribe后订阅仍运行的问题求助

问题根源 #

1. BehaviorSubject的缓存特性：BehaviorSubject会永久保存最新发射的值，当组件重新初始化订阅时，会立即收到这个缓存值——这是它的设计特性，并非代码bug。
2. 潜在的重复订阅：如果listenDueDateRes方法被多次调用（比如除了ngOnInit，还在其他钩子/事件中触发），每次调用都会创建新的订阅实例，但dueDateSubscription只会覆盖为最后一个实例，之前的旧订阅没有被取消，依然会响应后续的发射值。
3. 手动取消订阅的疏漏：即使在ngOnDestroy中调用了unsubscribe，如果订阅实例被多次覆盖，旧的订阅就无法被正确取消。

解决方案 #

方案1：用takeUntil管理订阅（推荐）

这是Angular中管理组件订阅的标准做法，彻底避免手动取消的疏漏：

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

export class RentUnitsTransactionDetailsComponent implements OnInit, OnDestroy {
  private destroy$ = new Subject<void>();
    
  ngOnInit(){
    this.listenDueDateRes();
  }

  listenDueDateRes() {
    this.sharedService.sendDueDatetoPayments.pipe(
      takeUntil(this.destroy$)
    ).subscribe((res: any) => {
      console.log(res)
      if (res) {
       // do something
      }
    });
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

所有通过takeUntil(this.destroy$)的订阅，都会在组件销毁时自动取消，不会有遗漏。

方案2：避免重复订阅

确保listenDueDateRes只被调用一次，或者在每次订阅前先取消已有订阅：

listenDueDateRes() {
  // 先取消已有订阅，再创建新订阅
  this.dueDateSubscription?.unsubscribe();
  this.dueDateSubscription = this.sharedService.sendDueDatetoPayments.subscribe((res: any) => {
    console.log(res)
    if (res) {
     // do something
    }
  });
}

方案3：替换为普通Subject（无需缓存时）

如果不需要BehaviorSubject的缓存特性，直接换成普通Subject，新订阅不会收到历史值：

// Service中修改
sendDueDatetoPayments = new Subject<any>();
    
communicateDueDatetoPayments(msg) {
    this.sendDueDatetoPayments.next(msg);
}

方案4：组件销毁时重置缓存值（可选）

如果需要保留BehaviorSubject的缓存，但希望组件重新进入时不收到旧值，可以在销毁时发送初始值：

ngOnDestroy() {
    this.dueDateSubscription?.unsubscribe();
    this.sharedService.sendDueDatetoPayments.next(null);
}

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