Angular2：在匿名函数中访问类变量

Question

我确信有一个简单的方法可以做到这一点，但我似乎无法找到它。这里是我的代码

export class UserLoginComponent { 
private user: User; 
public authService: AuthService; 

constructor(private cognitoConfigs: CognitoUtil, authService: AuthService) { 
    this.user = new User(); 
    this.authService = authService; 
} 

authenticate() { 

    // Some work being done here 
    let cognitoUser = new AWSCognito.CognitoIdentityServiceProvider.CognitoUser(userData); 

    cognitoUser.authenticateUser(authenticationDetails, { 

     onSuccess: function(result: any) { 
      this.authService.login(this.user, result); 
     }, 
     onFailure: function(err: any) { 
      console.log(err.message); 
     }, 

    }); 

} 
} 

问题：在回调的onSuccess我无法访问属于它的父类的this.authService变量。

Answer 1

请勿使用function()，因为这会更改this的范围。

阵列功能保留的this

onSuccess: (result: any) => { 
     this.authService.login(this.user, result); 
    }, 
    onFailure: (err: any) => { 
     console.log(err.message); 
    }, 

Answer 2

范围这里的问题是，成功的回调函数是在不同的词法环境。这就是为什么可以使用箭头函数=>来定义ES6 +函数的原因。

onSuccess:(result: any) => { 
     this.authService.login(this.user, result); 
} 

或分配此于该函数与ES5语法范围以外的变量：

var self = this; 

onSuccess: function(result: any) { 
    self.authService.login(this.user, result); 
}