Ionic 2，this.nav.push（）未定义

Question

我来自Ionic 1，我以离子2开始。 当我在承诺后使用this.nav.push（nameOftheOterPage）时出现错误，但当我在promise函数authHandler外部使用它时，此函数this.nav.push完全工作：

import {Page, NavController} from 'ionic-angular'; 
    import {ItemDetailsPage} from '../item-details/item-details'; 

    @Page({ 
     templateUrl: 'build/pages/login/login.html' 
    }) 
    export class LoginPage { 
     static get parameters() { 
     return [[NavController]]; 
     } 

     constructor(nav) { 
     this.nav = nav; 
     this.firebaseUrl = "https://MYFIREBASE.firebaseio.com"; 
     this.authType = "login"; 
     this.error_username = false; 
     } 

     login(form) { 
     if(form.controls.username.value === null){ 

     this.error_username = true; 
     } 
     else{ 
      /* Authenticate User */ 
      var ref = new Firebase(this.firebaseUrl); 
      ref.authWithPassword({ 
      email : form.controls.username.value, 
      password : form.controls.password.value 
      }, this.authHandler); 
      } 
     } 

     authHandler(error, authData) { 
     if (error) { 
      console.log("Login Failed!", error); 
     } else { 
      console.log(authData); 
      this.nav.push(ItemDetailsPage); 
     } 
     } 
    } 

你能帮我吗？

感谢。

Answer 1

在javascript对象中使用this有点棘手，特别是在涉及回调函数时。 （我对此建议这个interesting article）。

它的要点是，你总是需要跟踪哪个对象是调用该函数的对象，因为this将被绑定到调用对象。

你的问题的解决方案将是bind类this回调，使this会是什么，你认为它应该是。所以，当你调用authWithPassword，像这样做：

ref.authWithPassword({ 
    email: form.controls.username.value, 
    password: form.controls.password.value 
}, this.authHandler.bind(this)); 

编辑
作为@Manu巴尔德斯的意见建议，你有，如果你想避免使用bind另一种选择，是定义authHandler以下列方式：

authHandler = (error, authData) => { 
    if (error) { 
     console.log("Login Failed!", error); 
    } else { 
     console.log(authData); 
     this.nav.push(ItemDetailsPage); 
    } 
} 

这工作，因为在arrow functions，他们this设置为外执行上下文的，不管是谁来电了。