Angular中ngOnDestroy未清理订阅，返回组件data仍保留值问题

你的订阅已经被正确清理了，问题出在BehaviorSubject的特性上，和订阅清理无关：

1. BehaviorSubject的缓存特性
   BehaviorSubject会始终保存最后一次通过next()发送的值，当新的订阅者订阅时，它会立刻把这个缓存值推送给订阅者：

   • 首次进入组件时，你初始化BehaviorSubject为{}，所以第一次订阅会收到这个空值
   • 后续操作调用setOpenState更新了值，BehaviorSubject缓存了这个最新值
   • 离开组件时你取消了订阅，这一步是有效的，但BehaviorSubject的缓存值不会被清空
   • 再次进入组件重新订阅时，BehaviorSubject会直接把缓存的最新值推送给你，所以你看到的是已填充状态的data

2. 验证订阅是否真的被清理
   你可以在ngOnDestroy里加日志，或者在subscribe回调里打印当前组件实例，离开组件后如果没有新的日志输出，说明订阅确实被清理了：

   ngOnDestroy() {
     console.log('组件销毁，取消订阅');
     this.subscriptions.forEach((sub) => sub.unsubscribe());
   }
   

3. 解决方案（根据需求选一种）

   • 不需要保留跨组件状态：把服务里的BehaviorSubject换成普通Subject，这样新订阅不会收到历史值，只有后续调用next()时才会触发回调：

     // Service里修改
     private _openStateSubject = new Subject<{ id: string; state: boolean }>();
     public openState$ = this._openStateSubject.asObservable();
     

   • 需要保留状态但进入组件时重置：在组件的ngOnInit里主动调用服务的setOpenState，传入初始空值：

     ngOnInit() {
       this.accordianStateService.setOpenState({} as { id: string; state: boolean });
       this.subscriptions.push(this.accordianStateService.openState$.subscribe(data => {
         console.log(data)
       }));
     }
     

   • 更简洁的订阅管理方式：使用takeUntil操作符替代手动管理订阅数组（可选优化，和当前问题无关，但能简化代码）：

     private destroy$ = new Subject<void>();
     
     ngOnInit() {
       this.accordianStateService.openState$
         .pipe(takeUntil(this.destroy$))
         .subscribe(data => {
           console.log(data)
         });
     }
     
     ngOnDestroy() {
       this.destroy$.next();
       this.destroy$.complete();
     }
     

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