如何在函數中綁定這個？

Question

我有這個功能，但當我把這條線開始： this.router.navigate(['/home']);它的工作原理，但它不工作，當我把它放在哪裏，現在在我的代碼波紋管。任何建議？

submitLogin(values){ 

     // Variable to hold a reference of addComment/updateComment 
     let loginOperation:Observable<any>; 
     loginOperation = this.loginService.Login(values); 
     loginOperation.subscribe(
      function(response) { console.log("Success Response" + response)}, 
      function(error) { console.log("Error happened" + error)}, 
      function(){ 
       this.router.navigate(['/home']); 
       console.log("the subscription is completed"); 


      } 
     ); 

    } 

Answer 1

您需要使用當前因爲this無法在JavaScript中識別。

submitLogin(values){ 
    var current = this; 
    Variable to hold a reference of addComment/updateComment 
    let loginOperation:Observable<any>; 
    loginOperation = this.loginService.Login(values); 
    loginOperation.subscribe(
    function(response) { console.log("Success Response" + response)}, 
    function(error) { console.log("Error happened" + error)}, 
    function(){ current.router.navigate(['/home']); 
       console.log("the subscription is completed"); }); 
} 

Answer 2

使用ES6語法忽略這個或this實例存儲到一個變量

submitLogin(values){ 
var vm = this; 
     // Variable to hold a reference of addComment/updateComment 
     let loginOperation:Observable<any>; 
     loginOperation = this.loginService.Login(values); 
     loginOperation.subscribe(
      function(response) { console.log("Success Response" + response)}, 
      function(error) { console.log("Error happened" + error)}, 
      function(){ 
       vm.router.navigate(['/home']); 
       console.log("the subscription is completed"); 
      } 
     ); 

    } 

，或者你可以當您使用角2使用與ES6

submitLogin(values){ 
     // Variable to hold a reference of addComment/updateComment 
     let loginOperation:Observable<any>; 
     loginOperation = this.loginService.Login(values); 
     loginOperation.subscribe(
      (response) => { console.log("Success Response" + response)}, 
      (error) => { console.log("Error happened" + error)}, 
      () => { 
       this.router.navigate(['/home']); 
       console.log("the subscription is completed"); 
      } 
     ); 

    } 

Answer 3

做到這一點ARROW FUNCTIONS() => {}

loginOperation.subscribe((response: any) => { 
      console.log("Success Response" + response) 
    }, (error: any) => { 
      console.log("Error happened" + error) 
    },() => { 
      this.router.navigate(['/home']); 
      console.log("the subscription is completed"); 
}); 

Answer 4

在訂閱處理程序中使用函數關鍵字會導致創建新的JavaScript範圍。這實際上意味着在這些處理程序中，這個關鍵字指向別的東西，而不是你的類。

圍繞它的兩種方法是在您的訂閱處理程序之外捕獲對組件的引用，並在需要訪問組件成員時使用該引用，或者使用es2015樣式箭頭函數聲明完全繞過問題沒有引入新範圍，並因此不影響此關鍵字的值

方法1：

onLogin() { 
    let component = this; 
    ... 
    loginOperation.subscribe(
     function(response) { console.log("Success Response" + response)}, 
     function(error) { console.log("Error happened" + error)}, 
     function(){ 
      component.router.navigate(['/home']); 
      console.log("the subscription is completed"); 


     } 
    ); 


} 

方法2（優選）：

onLogin() { 
    let loginOperation:Observable<any>; 
    loginOperation = this.loginService.Login(values); 
    loginOperation.subscribe(
     (response) => { console.log("Success Response" + response)}, 
     (error) => { console.log("Error happened" + error)}, 
     () => { 
      this.router.navigate(['/home']); 
      console.log("the subscription is completed"); 

     } 
    );