无法读取未定义的属性“navCtrl”

Posted 2023-03-13

【中文标题】无法读取未定义的属性“navCtrl”

【英文标题】：Cannot read property 'navCtrl' of undefined

【发布时间】：2017-09-11 02:29:12

【问题描述】：

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

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

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

【参考方案1】：

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

箭头函数表达式的语法比函数短 表达式并且不绑定它自己的 this、arguments、super 或 新目标。

因此，只需像这样更改 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) ...

【讨论】：

是的，这是最好的解决方案。感谢您提供的信息 :)

谢谢！我还没有尝试过，但这似乎更好！

我完成了您的解决方案的实施，我可以确认它运行良好。感谢您的帮助！

很高兴听到这个消息:)

你救了我的命：*

【参考方案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 内部传递的函数。