angular – 无法读取未定义的属性’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);
    });
  }
}

解决此问题的更好方法是使用 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);
    });
  }

注意(结果)=> {…}而不是函数(结果){…}