ES6 + Angular Controller-Klasse, das immer in Rückruf undefined

Question

Betrachten Sie die folgende Klasse

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; 
     }); 
    } 
} 

Alles funktioniert gut, mit Ausnahme dann traf ich den Fehler Callback-Funktion und es wird zu this.loading = false; die aus irgendeinem Grund dieser ist nicht erfüllt.

Wie behalte ich einen Verweis auf die Klasse "this" im Fehlerrückruf?

Answer 1

Sie müssen Fettpfeile verwenden, um den Umfang beizubehalten.

//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

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

Die diese innerhalb der Funktion ist ein anderer Anwendungsbereich so dass diese auf die Funktion anstelle der Funktion Mutter bezieht.

Lösung,

dies als Selbst definieren:

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 
     }); 
    } 
} 

Answer 3

Dies ist ein sehr häufiges Problem Zusammenhang auf eine Callback-Funktion übergeben. Die allgemeine Antwort ist so etwas wie

var self=this; im Kontext zu erklären, von dem Sie halten „diese“ und dann in Ihrer Callback-Funktion wollen Referenz es wie so

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

in Ihrem speziellen Fall, dass Sie haben bereits let vm = this; so konnte man vm._authService.setUser(user); vm._$state.go("dashboard");