angular – 我怎样才能“修补”一个Observable for Zone.js？

我正在创建一个Angular 2组件,当使用某个Observable模式时,Angular的变化检测对我不起作用.它看起来像这样：

let getResult$= this.http.get('/api/identity-settings');

    let manager$= getResult$
        .map((response) => /* -- create manager object -- */);

    let signinResponse$= manager$
        .flatMap(manager => manager.processSigninResponse());

    this.readyToLogin$= manager$.map(() => true).startWith(false);
    this.isLoggedIn$= signinResponse$.map(() => true).startWith(false);

然后在我的模板中：

<h1>Ready to Log In: {{readyToLogin$| async}}</h1>
<h1>Logged In: {{isLoggedIn$| async}}</h1>

由于readyToLogin $Observable基于响应http.get()而发生的同步操作集(Angular“monkey patches”以确保它知道何时需要检测更改),“准备登录”消息在适当的时间切换为true.

但是,由于processSignInResponse()产生Promise<>,所以订阅flatMap结果的任何内容都与http请求的完成事件异步发生.因此,它需要手动干预以通知组件的区域它需要检查更改.

如何在ngzone知道在任何订阅被解析后检测更改的方式包装signInResponse $observable？

更新

布兰登的答案一直有效,直到我更新到RC5,此时事情再次停止了.结果是the 3rd-party library I was using borked Zone.js.一旦解决了,根本没有必要使用变通方法 – 内置的猴子修补工作正常！

您可以创建一个新的observeOnZone运算符,可用于“猴子补丁”任何可观察的.就像是：

Rx.Observable.prototype.observeOnZone = function (zone) {
    return Observable.create(observer => {
        var onNext = (value) => zone.run(() => observer.next(value));
        var onError = (e) => zone.run(() => observer.error(e));
        var onComplete = () => zone.run(() => observer.complete());
        return this.subscribe(onNext,onError,onComplete);
    });
};

并像这样使用它：

this.isLoggedIn$= signinResponse$.map(() => true).startWith(false).observeOnZone(zone);

原文地址：https://www.jb51.cc/angularjs/141180.html