ES6 + Angular Controller 类，回调中未定义

Question

考虑下面的类

class LoginController{
    constructor(authService,$timeout,$state){
        let vm = this;
        this.loading = false;
        this._authService = authService;
        this._$timeout = $timeout;
        this._$state = $state;
        this.loading = false;
        this.statusMessage = null;
    }

    login(){
        this.loading = true;
        this.statusMessage = null;

        let loginModel = {
            UserName : this.username,
            Password : this.password,
            RememberMe : this.rememberMe
        };

        //Login User
        this._authService.login(loginModel).then(function(user){
            //Set User Login & send to Dashboard
            this._authService.setUser(user);
            this._$state.go("dashboard");

        }, function(error){
            const errorMessage = error ? error.Message : "Undefined Login Issue occurred !";
            this.loading = false;
        });
    }
}

一切正常，除了我点击了错误回调函数，它到达this.loading = false;，由于某种原因，这是未定义的。

如何在错误回调中保留对“this”类的引用？

Answer 1

您必须使用粗箭头来保持范围。

//Login User
this._authService.login(loginModel).then((user) => {
    //Set User Login & send to Dashboard
    this._authService.setUser(user);
    this._$state.go("dashboard");
}, (error) => {
    const errorMessage = error ? error.Message : "Undefined Login Issue occurred !";
    this.loading = false;
});

Answer 2

这是将上下文传递给回调函数的一个非常常见的问题。通用的答案是声明类似

var self=this; 在您想要保留“this”的上下文中 然后在你的回调函数中像这样引用它

function callback () { self.myvariable=true; };

在您的特定情况下，您已经声明 let vm = this; 所以你可以使用 vm._authService.setUser(user); vm._$state.go("dashboard");

Answer 3

function(error){
    this.loading = false;
}

函数内部的 this 是一个不同的作用域，所以 this 指的是函数而不是父函数。

解决方案，

将此定义为自我：

class LoginController{
    constructor(authService,$timeout,$state){
        let vm = this;
        this.loading = false;
        this._authService = authService;
        this._$timeout = $timeout;
        this._$state = $state;
        this.loading = false;
        this.statusMessage = null;
    }

    login(){
        var self = this; //Define this as self

        this.loading = true;
        this.statusMessage = null;

        let loginModel = {
            UserName : this.username,
            Password : this.password,
            RememberMe : this.rememberMe
        };

        //Login User
        this._authService.login(loginModel).then(function(user){
            //Set User Login & send to Dashboard
            self._authService.setUser(user);
            self._$state.go("dashboard");

        }, function(error){
            const errorMessage = error ? error.Message : "Undefined Login Issue occurred !";
            self.loading = false; //Self refers to this of parent scope
        });
    }
}