Question

我来自Ionic 1，我从离子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

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

修改
正如@ManuValdés在评论中所建议的那样，如果您想避免使用bind，则另外一个选项是以下列方式定义authHandler：

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

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

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

1 个答案: