我有一个项目,使用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
