如何在函数中绑定这个？

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

     } 
    );