IonicでTwitterログイン成功したらindexページに遷移させたい。

Question

Ionicを勉強しているものです。

IonicでTwitterログインに成功したらindexページに遷移させたいのですがNavControllerのところでエラーとなってしまいます。
実際に動かすとTwitterログインボタンを押してTwitter認証が成功し「ログイン成功しました」とアラートが表示されるのですが
すぐに「ログインできませんでした。」というアラートが表示されます。

動きから「this.navCtrl.push(IndexPage);」の実装がおかしいということが分かったのですが
どう修正してよいかわからず困っております。

then(function (authData) {・・・}を使用しているためthis.navCtrlという記述が使えないのでnavCtrlだけにして
動かしみたのですがエラーは解消されませんでした。

以下がソースコードです

Twitterログインページ

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

import { Observable } from 'rxjs/Observable';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';

import { IndexPage } from '../../pages/index/index';

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {
  user: Observable<firebase.User>;

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public afAuth: AngularFireAuth
  ) {
    this.user = afAuth.authState;
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }

  // ログイン処理
  login() {
    this.afAuth.auth.signInWithPopup(new firebase.auth.TwitterAuthProvider()).then(function (authData) {
      alert("ログイン成功しました。");
      this.navCtrl.push(IndexPage);
    }).catch(function (error) {
      alert("ログインできませんでした。");
    });
  }

  // ログアウト処理
  logout() {
    this.afAuth.auth.signOut();
  }
}

画面

実装参考URL：https://qox.jp/blog/ionic2-firebase/

Ionicにお詳しい方がいましたらご回答いただけないでしょうか？
よろしくお願いいたします。

Answer 1

`then(function (authData) {・・・}を使用しているためthis.navCtrlという記述が使えないので

アロー関数を使って

// ログイン処理
login() {
  this.afAuth.auth.signInWithPopup(new firebase.auth.TwitterAuthProvider()).then(authData => {
    alert("ログイン成功しました。");
    this.navCtrl.push(IndexPage);
  }).catch(function (error) {
    alert("ログインできませんでした。");
  });
}

とすることで this.navCtrl が使えます。もしくは

// ログイン処理
login() {
  const self = this;
  this.afAuth.auth.signInWithPopup(new firebase.auth.TwitterAuthProvider()).then(function(authData) {
    alert("ログイン成功しました。");
    self.navCtrl.push(IndexPage);
  }).catch(function (error) {
    alert("ログインできませんでした。");
  });
}

のように this を別の変数に代入して、コールバック関数内から this のメソッドを呼び出すこともできます。

Comments

[Linkey]

うまくいきました。ありがとうございました。