angular - 无法读取未定义的属性 'navCtrl'

Question

几个小时以来，我一直在我的项目中寻找解决此问题的方法，但无济于事。我读过许多其他“无法读取未定义的属性......”的帖子，但似乎找不到适合我的解决方案。

下面是我项目中的相关代码。

这是一个 Ionic 2/Apache Cordova 项目，下面的页面是该应用程序的登录页面。它不是核心应用程序组件之一，它只是一个普通页面。

出于某种原因，NavController 在 onSignIn() 方法中未被识别，但我不知道为什么。我已经在构造函数中注入(inject)了 NavController，看起来我并没有遵循我所知道的任何已知过程，但它每次仍然失败。

import firebase from 'firebase';
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { HomePage } from './../home/home';

var provider = new firebase.auth.FacebookAuthProvider();

@Component({
  selector: 'page-signin',
  templateUrl: 'signin.html',
})

export class SignInPage {

  constructor(public navCtrl: NavController, public params: NavParams) {}

  onSignIn() {
    firebase.auth().signInWithPopup(provider).then(function(result) {
      console.log(result.credential.accessToken);
      console.log(result.user.displayName);
      this.navCtrl.setRoot(HomePage);
    }).catch(function(error) {
      console.log(error.message);
    });
  }
}

Answer 1

解决此问题的更好方法是使用 arrow functions :

An arrow function expression has a shorter syntax than a function expression and does not bind its own this, arguments, super, or new.target.

因此，只需像这样更改 onSignIn 方法即可解决您的问题:

  onSignIn() {
    firebase.auth().signInWithPopup(provider).then((result) => {
      console.log(result.credential.accessToken);
      console.log(result.user.displayName);
      this.navCtrl.setRoot(HomePage);
    }).catch(function(error) {
      console.log(error.message);
    });
  }

注意 (result) => {...} 而不是 function(result) {...}