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 +函数中可以使用箭头函数=＆gt;来定义。

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

或使用ES5语法将 this 分配给函数范围之外的变量：

var self = this;

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

Angular2：匿名函数中的Access类变量

2 个答案: