如何仅订阅BehaviorSubject中单个属性的变化？

当然可以实现，你可以通过RxJS的操作符组合，精准监听单个属性的变化，核心思路是先提取目标属性，再过滤掉重复的属性值。

具体实现代码 #

import { BehaviorSubject } from 'rxjs';
import { map, distinctUntilChanged } from 'rxjs/operators';

export interface MyObject {
  property1: string,
  property2: string
};

const subject = new BehaviorSubject<MyObject>({
  property1: 'test',
  property2: 'test'
});

// 仅监听property2的变化
subject.pipe(
  map(value => value.property2), // 提取property2的值
  distinctUntilChanged() // 只有当值和上一次不同时才触发订阅
).subscribe(property2Value => {
  console.log('property2更新为:', property2Value);
});

// 测试场景1：修改property2，会触发订阅
subject.next({
  property1: 'test',
  property2: 'test2'
});

// 测试场景2：仅修改property1，property2未变化，不会触发订阅
subject.next({
  property1: 'newTest',
  property2: 'test2'
});

关键操作符说明 #

• map: 从MyObject对象中提取出property2的值，将原Observable转换为仅发射property2值的Observable。
• distinctUntilChanged: 对比当前发射的值与上一次的值，只有两者不同时才会把值传递给订阅者，以此过滤掉property2未变化的无效触发。

额外注意 #

如果你的属性是引用类型（比如对象、数组），distinctUntilChanged默认的浅比较可能无法识别内部变化，这时需要传入自定义比较函数：

distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr))

不过对于字符串这种基本类型，默认的比较逻辑就足够用了。

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