离子 2，this.nav.push() 未定义

Question

我来自 Ionic 1，我从 ionic 2 开始。 当我在 promise 之后立即使用 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

this 在 javascript 对象中的使用有点棘手，尤其是在涉及回调时。 （我推荐这个interesting article 关于它）。

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

你的问题的解决方案是bind你的班级'this到回调，这样this就会是你认为应该的。所以当你打电话给authWithPassword时，这样做：

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

编辑
正如 @Manu Valdés 在 cmets 中所建议的那样，如果您想避免使用 bind，您还有一个选择是按以下方式定义 authHandler：

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

这是因为在arrow functions 中，他们的this 被设置为外部执行上下文，无论调用者是谁。