未定義のプロパティ 'navCtrl'を読み取ることができません

Question

時間内に私のプロジェクトでこの問題の解決策を探してきました。私は他の多くの "未定義の"プロパティを読むことができませんでしたが、私の解決策を見つけることはできません。

以下は、私のプロジェクトに関連するコードです。

これはイオン2/Apacheのコルドバプロジェクトであり、以下のページには、アプリケーションのためのページでログインです。それは、主要なアプリケーションコンポーネントの一つではなく、単なる普通のページです。

何らかの理由で、からNavControllerはonSignIn（）メソッドで認識されていないが、私は、なぜ分かりません。私はコンストラクタに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を使って、次のようになります。

矢印関数式は、関数 表現よりも短い構文を持っており、この独自のを結合しない、引数、スーパー、または new.target。

は、だからあなたの問題はちょうどこのようonSignIn方法を変更することによって解決されるだろう。代わりに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の中に渡される関数に属します。