RxJS订阅组件变量后值变更无响应？求排查原因

你现在用of(this.distance)返回的Observable是个冷Observable，它只会在订阅发生的那一刻，把当时的distance值发射一次，之后就完成了——不管你后面怎么修改distance变量，这个Observable都不会再发射新值了，这就是订阅者收不到更新的原因。

要实现“变量更新时自动通知订阅者”的需求，你需要用Subject或者它的子类，比如最适合这种场景的BehaviorSubject，它能记住当前的最新值，并且每次有新值时都会主动推送给所有订阅者。

下面是修改后的代码示例：

import { BehaviorSubject, Observable } from 'rxjs'

// 把普通变量换成BehaviorSubject，初始值设为0
private distance$ = new BehaviorSubject<number>(0);

constructor() {
  // 订阅这个BehaviorSubject
  this.getDistance().subscribe((newDistanceValue) => {
    console.log('newDistanceValue', newDistanceValue);
  });
}

getDistance(): Observable<number> {
  // 返回它的Observable形式，避免外部直接修改Subject的状态
  return this.distance$.asObservable();
}

// 假设你有一个修改距离的方法，比如：
updateDistance(newValue: number) {
  // 通过next()方法推送新值，所有订阅者都会收到这个更新
  this.distance$.next(newValue);
}

为什么这样可行？

• BehaviorSubject是热Observable，它会持续活跃并推送新值给订阅者
• 它会保存当前的最新值，新的订阅者一开始就能拿到当前的最新值（和你之前用of拿到初始值的效果一致）
• 每次调用next()时，所有订阅者都会收到新的数值

这样以后，只要你调用updateDistance()修改值，订阅者就会立刻打印出新的数值啦！

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