离子 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 您的 class' this 到回调，这样 this 就会成为您认为应该的样子。所以当你调用 authWithPassword 时，这样做：

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

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

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

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

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

Ionic 2, this.nav.push() is undefined

javascript

ionic-framework

ionic2

angular