angularjs – 如何在rxjs Observable中包含angular $http promis

发布时间：2020-12-17 17:15:40 所属栏目：安全来源：网络整理

导读：我有一个项目,使用angular的$http服务从远程位置加载数据.我想使用rxjs Observables,所以我的服务中的调用如下所示： userInfo() : Rx.ObservableIUserInfo { var url : string = someUrl + this._accessToken; return Rx.Observable.fromPromiseIUserInfo(

我有一个项目,使用angular的$http服务从远程位置加载数据.我想使用rxjs Observables,所以我的服务中的调用如下所示：

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;
    }

问题是,尽管名称,电子邮件和个人资料图片正在更新,但这些更改不可见.只要其他任何东西触发了角度$apply,就会出现更改,但由于Observable,控制器中的这些更改发生在$http调用触发的角度摘要循环之后.
如果我的服务只是向控制器返回一个承诺,这确实可以正常工作.

在这种情况下如何更新我的视图？我不想手动连接每个observable来触发摘要周期.我希望所有Observable在收到新值或错误时触发摘要周期.

解决方法

我们可以使用rx.angular.js中的 ScopeScheduler来实现此目的.我们只需创建一个新的,我们创建角度模块并将$rootScope传递给它：

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

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

这就是你要做的一切.现在所有Rx.Observable都会在获得新值时触发$apply.

由于某种原因,当rx.angular.js库升级到rxjs版本4时,ScopeScheduler被删除.我们必须使用rx.angular.js版本0.0.14来使用ScopeScheduler.

我不知道在第4版中建议的解决方案是什么.

可以在此处查看使用此修复程序的项目：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!