如何在rxjs Observable中包装$http promise调用时刷新视图

Question

我有一个项目，使用角的$超文本传输协议服务从远程位置加载数据。我想使用rxjs的可观察性，所以我的服务中的调用看起来像这样：

    userInfo() : Rx.Observable<IUserInfo> {
        var url : string = someUrl + this._accessToken;

        return Rx.Observable.fromPromise<IUserInfo>( this.$http.get<IUserInfo>( url ) );
    }

这是我的控制器订阅的，如下所示：

    getUserInfo() : void {
        this._googleService.userInfo().subscribe(
            ( result ) => { this.handleUserInfo( result ) },
            ( fault : string ) => this.handleError( fault )
        )
    }

    private handleUserInfo( result : IHttpPromiseCallbackArg<IUserInfo> ) : void {
        console.log( "User info received at " + new Date() );

        this._name = result.data.given_name + " " + result.data.family_name;
        this._email = result.data.email;

        this._profilePicUrl = result.data.picture;
    }

问题是，尽管名称、电子邮件和个人资料图片正在更新，但这些更改不可见。一旦其他任何东西触发角$应用，更改就会出现，但由于可观察到，控制器中的这些更改发生在由$超文本传输协议调用触发的角摘要循环之后。如果我的服务只是向控制器返回一个promise，这确实可以正常工作。

在这种情况下，如何更新视图？我不想手动连接每个可观察对象以触发摘要循环。我希望所有可观察对象在接收到新值或错误时触发摘要循环。

Answer 1

我拿不到处方。ScopeScheduler方法无法工作，因此我只是重写了rx observable subscribe方法本身，并将回调封装在$rootScope中$适用：）

module.run(['$rootScope', 'rx', function ($rootScope, rx) {
    rx.Observable.prototype.subscribe = function (n, e, c) {
        if(typeof n === 'object') {
            return this._subscribe(n);
        }

        var onNext = function(){};
        if(n) {
            onNext = function(value) {
                if($rootScope.$$phase) {
                    n(value);
                }
                else {
                    $rootScope.$apply(function(){ n(value); });
                }
            };
        }

        var onError = function(err) { throw err; };
        if(e) {
            onError = function(error) {
                if($rootScope.$$phase) {
                    e(error);
                }
                else {
                    $rootScope.$apply(function(){ e(error); });
                }
            };
        }

        var onCompleted = function(){};
        if(c) {
            onCompleted = function() {
                if($rootScope.$$phase) {
                    c();
                }
                else {
                    $rootScope.$apply(function(){ c(); });
                }
            };
        }

        return this._subscribe(
            new rx.AnonymousObserver(onNext, onError, onCompleted)
        );
    };
}]);

Answer 2

我们可以使用rx的ScopeScheduler。有棱角的谢谢。我们只需创建一个新模块，在其中创建角度模块并将$rootScope传递给它：

const module : ng.IModule = angular.module( 'moduleName', [] );

module.run( ["$rootScope", ( $rootScope ) => {
    new Rx.ScopeScheduler( $rootScope );
}]);

这就是你要做的。现在全部接收。可观测值在获得新值时触发$apply。

由于某种原因，在接收时ScopeScheduler被删除。有棱角的js库已升级到rxjs版本4。我们必须使用rx。有棱角的js版本0.0。14使用ScopeScheduler。

我不知道版本4中建议的解决方案是什么。

可以在此处查看使用此修复html" target="_blank">程序的项目：

https://github.com/Roaders/Typescript-OAuth-SPA/tree/observable_apply_issues