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設置爲外執行上下文的，不管是誰來電了。