无法读取undefined的属性'navCtrl'

几个小时以来,我一直在我的项目中寻找解决这个问题的方法无济于事.我已经阅读了许多其他"无法读取属性......未定义"的帖子,但似乎无法找到我的解决方案.

以下是我项目中的相关代码.

这是一个Ionic 2/Apache Cordova项目,下面的页面是应用程序的登录页面.它不是核心应用程序组件之一,它只是一个常规页面.

出于某种原因,在onSignIn()方法中没有识别NavController,但我不知道为什么.我在构造函数中注入了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);
    });
  }
}

sebaferreras.. 6

解决此问题的更好方法是使用箭头函数:

箭头函数表达式具有比函数表达式更短的语法,并且不绑定它自己的this,arguments,super或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) {...}

解决此问题的更好方法是使用箭头函数:

箭头函数表达式具有比函数表达式更短的语法,并且不绑定它自己的this,arguments,super或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) {...}