Question

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

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

这是一个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);
    });
  }
}

Answer 1

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

箭头函数表达式的语法短于函数表达式并不绑定它自己的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) {...}

Answer 2

尝试以下代码：

let _this;

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

export class SignInPage {

  constructor(public navCtrl: NavController, public params: NavParams) {
    _this = this; //Either here or in onSignIn whichever called first
  }

  onSignIn() {
    _this = this; //Either here or in constructor whichever called first
    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);
    });
  }
}

由于this的范围，我认为您正面临着这个问题。在您的情况下，this的范围属于在then内传递的函数。

无法读取undefined的属性'navCtrl'

2 个答案: