为什么Angular组件中RxJS Subject无法访问到最新数据？

核心原因 #

• Subject本身的时序缺陷：普通Subject不会缓存任何历史发射值，只会将订阅之后产生的新值推送给订阅者。如果出现两种情况就会拿不到最新值：
  1. 组件B先触发{type: "getMyObj"}请求时，组件A还没完成对pubSub的订阅，A根本收不到请求，自然不会返回数据
  2. 组件A返回this.myObj时，组件B还没订阅pubSub的响应事件，返回的值直接丢失
• 同一Subject复用导致事件串扰：你用同一个pubSub既发请求又发响应，首先组件A返回this.myObj的事件会被A自己的订阅逻辑收到，如果你返回的对象也包含type: "getMyObj"字段，就会触发无限循环调用next，导致值混乱；其次如果有其他地方也监听了这个Subject，很容易出现逻辑冲突。
• this指向异常：如果你实际代码中订阅回调没有用箭头函数，也没有手动绑定this到组件A实例，回调内的this会指向订阅上下文而非组件A，拿到的自然不是组件A上的最新myObj。
• 组件生命周期问题：如果触发请求时组件A已经被销毁（比如路由切换离开A对应的页面），要么订阅已经被取消，要么组件实例已经被回收，this.myObj会是旧值甚至undefined。

修复方案 #

优先推荐你放弃这种请求-响应的通信模式，直接用共享服务托管状态更稳定，实现逻辑如下：

// 共享myservice代码
import { BehaviorSubject } from 'rxjs';

// 替换原来的pubSub Subject，直接托管myObj状态
private myObjSource = new BehaviorSubject<any>(null); // 初始化值可以自己定义
public myObj$ = this.myObjSource.asObservable();

// 提供更新myObj的方法
updateMyObj(newVal: any) {
  this.myObjSource.next(newVal);
}

// 组件A代码，只需要在myObj更新时调用服务的更新方法即可
ngOnInit() {
  // 每次myObj变化就同步到服务
  this.myObj = xxx;
  this.myService.updateMyObj(this.myObj);
}

// 组件B代码，直接订阅拿最新值即可，不需要主动发请求
ngOnInit() {
  this.myService.myObj$.subscribe(latestMyObj => {
    // 这里拿到的永远是最新的myObj值
    console.log(latestMyObj);
  })
}

如果你一定要保留当前的请求-响应模式，需要做以下修改：

• 拆分请求、响应为两个独立的Subject，避免事件串扰
• 组件A的订阅逻辑放在ngOnInit生命周期钩子中确保尽早注册，同时在ngOnDestroy中取消订阅，避免内存泄漏和上下文失效
• 将普通Subject替换为ReplaySubject(1)，缓存最近一次发射的值，解决时序问题导致的取值丢失

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