在带有 AngularJS 和 Typescript 的 $http 回调中使用 'this'
Using 'this' in $http callback with AngularJS and Typescript
我在服务中使用承诺,然后当结果加载时我想导航到另一个页面。
我的代码:
export class PicasaAuthenticator
{
// Constructor
static $inject = [ '$window', '$location', '$http' ];
constructor( private window : ng.IWindowService, private location : ng.ILocationService, private http : ng.IHttpService )
{
}
// Private Functions
private validateToken( results : IAuthResults ) : void
{
if( results && results.access_token )
{
var validateTokenURL : string = "https://www.googleapis.com/oauth2/v1/tokeninfo";
validateTokenURL += "?access_token=" + results.access_token;
this.http.get<ITokenValidationResult>( validateTokenURL );
this._validationPromise.then( this.handleTokenVerificationResult,this.handleTokenVerificationError );
}
}
private handleTokenVerificationResult( successResponse : ng.IHttpPromiseCallbackArg<ITokenValidationResult> ) : void
{
this._validationPromise = null;
if( successResponse.data.audience = client_id )
{
this.location.path( '/albums' );
}
else
{
alert( "audience does not match client ID" );
}
}
}
问题是 this.location 当然不存在于 handleTokenVerificationResult 中。如何设置此函数应 运行 的范围?我看到了一个使用 var self = this 的示例(无论如何我都不喜欢),但这没有用。
感谢您的帮助。
它可能不那么漂亮,但是使用箭头函数符号将正确保留 this
值,所以我会尝试将您的 validateToken()
函数更改为以下内容:
private validateToken( results : IAuthResults ) : void
{
if( results && results.access_token )
{
var validateTokenURL : string = "https://www.googleapis.com/oauth2/v1/tokeninfo";
validateTokenURL += "?access_token=" + results.access_token;
this.http.get<ITokenValidationResult>( validateTokenURL );
this._validationPromise.then( () => {
this.handleTokenVerificationResult.apply(this, arguments);
}, () => {
this.handleTokenVerificationError.apply(this, arguments);
});
}
}
或者,只需使用 Function.bind()
来保留 this
变量的值:
private validateToken( results : IAuthResults ) : void
{
if( results && results.access_token )
{
var validateTokenURL : string = "https://www.googleapis.com/oauth2/v1/tokeninfo";
validateTokenURL += "?access_token=" + results.access_token;
this.http.get<ITokenValidationResult>( validateTokenURL );
this._validationPromise.then(this.handleTokenVerificationResult.bind(this), this.handleTokenVerificationError.bind(this));
}
}
但是,您应该注意目前在 TypeScript 中使用 .bind()
destroys type information,所以我主要坚持使用箭头函数来正确保存类型信息。
我在服务中使用承诺,然后当结果加载时我想导航到另一个页面。
我的代码:
export class PicasaAuthenticator
{
// Constructor
static $inject = [ '$window', '$location', '$http' ];
constructor( private window : ng.IWindowService, private location : ng.ILocationService, private http : ng.IHttpService )
{
}
// Private Functions
private validateToken( results : IAuthResults ) : void
{
if( results && results.access_token )
{
var validateTokenURL : string = "https://www.googleapis.com/oauth2/v1/tokeninfo";
validateTokenURL += "?access_token=" + results.access_token;
this.http.get<ITokenValidationResult>( validateTokenURL );
this._validationPromise.then( this.handleTokenVerificationResult,this.handleTokenVerificationError );
}
}
private handleTokenVerificationResult( successResponse : ng.IHttpPromiseCallbackArg<ITokenValidationResult> ) : void
{
this._validationPromise = null;
if( successResponse.data.audience = client_id )
{
this.location.path( '/albums' );
}
else
{
alert( "audience does not match client ID" );
}
}
}
问题是 this.location 当然不存在于 handleTokenVerificationResult 中。如何设置此函数应 运行 的范围?我看到了一个使用 var self = this 的示例(无论如何我都不喜欢),但这没有用。
感谢您的帮助。
它可能不那么漂亮,但是使用箭头函数符号将正确保留 this
值,所以我会尝试将您的 validateToken()
函数更改为以下内容:
private validateToken( results : IAuthResults ) : void
{
if( results && results.access_token )
{
var validateTokenURL : string = "https://www.googleapis.com/oauth2/v1/tokeninfo";
validateTokenURL += "?access_token=" + results.access_token;
this.http.get<ITokenValidationResult>( validateTokenURL );
this._validationPromise.then( () => {
this.handleTokenVerificationResult.apply(this, arguments);
}, () => {
this.handleTokenVerificationError.apply(this, arguments);
});
}
}
或者,只需使用 Function.bind()
来保留 this
变量的值:
private validateToken( results : IAuthResults ) : void
{
if( results && results.access_token )
{
var validateTokenURL : string = "https://www.googleapis.com/oauth2/v1/tokeninfo";
validateTokenURL += "?access_token=" + results.access_token;
this.http.get<ITokenValidationResult>( validateTokenURL );
this._validationPromise.then(this.handleTokenVerificationResult.bind(this), this.handleTokenVerificationError.bind(this));
}
}
但是,您应该注意目前在 TypeScript 中使用 .bind()
destroys type information,所以我主要坚持使用箭头函数来正确保存类型信息。