如何观察 RxJS 中的属性变化？答案

【问题标题】：How to observe property change in RxJS?如何观察 RxJS 中的属性变化？
【发布时间】：2017-08-14 11:55:30
【问题描述】：

我对 RxJS 没有太多经验，但我想知道是否有办法订阅对象属性更改？我正在使用 RxJS 5。我使用 BehaviorSubject 将新值推送给订阅者。主题包含定义一些应用程序设置的对象。

所以，我想做的是，我希望应用程序组件在特定属性更改时订阅并获取新值。或者，我希望 observable 为每个订阅者生成对象的副本 - 所以他们没有对原始对象的引用。

我的问题类似于this one。

提供应用程序设置的服务：

app.factory('settingsProvider', ['$rootScope', function ($rootScope) {

    let subject = new Rx.BehaviorSubject();

    let updateSettings = function (obj) {

        subject.next(_.merge({}, subject.getValue(), obj));
    };

    return {

        updateSettings: updateSettings,
        getObservable: function () {

            return subject.asObservable();
        }
    };
}]);

在某些指令中，我想订阅对某些属性的更改。我目前有这个：

let settings = {};
let settingsSubscription = settingsProvider.getObservable().subscribe(x => settings = x);

【问题讨论】：

请发布您的代码

标签： javascript angularjs rxjs

【解决方案1】：

我相信你想要运营商distinct。 https://rxjs-dev.firebaseapp.com/api/operators/distinct

这是一个老问题，所以我将给出 v6 语法并假设您同时已更新。这个概念没有改变，因此您可以在 v5 中应用这种方法。

您犯的最大错误是强制将settings 重新分配为上面的闭包。 Observable 最适合作为流，您可以将一个 observable 通过管道传输到下一个，并且没有副作用。如果我们假设你开始观察像 { foo: 1, bar: 2, baz: 3} 这样构建它的东西，我们可以首先 map 取出我们想要的道具，然后 distinct 确保我们只在更改时发出。

const fooUpdate$ = mySub$
  .pipe(
    .map(({ foo }) => foo)
    .distinct()
  );

fooUpdate$.subscribe(val => console.log(val));

// Example of testing it
mySub$.next({ foo: 1, bar: 2 });
mySub$.next({ foo: 1, bar: 3 });
mySub$.next({ foo: 2, bar: 4 });
mySub$.next({ foo: 2, bar: 5 });
mySub$.next({ foo: 2, bar: 5 });
mySub$.next({ foo: 3, bar: 2 });

// 1, 2, 3

【讨论】：