在 modal.present() 期间暂停 MyApp

Pause MyApp during modal.present()

原文Post:

我正在编写一个 Ionic 2 Hybrid 应用程序并尝试创建一个模式来登录 FB 并收集应用程序正确 运行 所需的信息。

当显示模式(并且用户正在登录)时,我需要在后台暂停该应用程序。换句话说,它不能继续后续过程,直到模态被解除。

这里是代码的相关部分作为示例:

var user = firebase.auth().currentUser;

if (user) {
  console.log("User is already signed in.");
} else {
  console.log("No user is signed in.");
  let profileModal = this.modalCtrl.create(ProfilePage);
  profileModal.present();
}

console.log("test pause.")

虽然模态仍在呈现,但在它被关闭之前,"test pause." 正在被写入控制台。我需要在模式被关闭之前不要将它写入控制台。

注意:除此位外,我一切正常。在关闭模态之前,我还没有想出如何完成 'pausing'。

有什么办法吗?


澄清:

我在主应用程序组件的 ngOnInit() 中展示模态。我这样做是因为我需要在加载主要应用程序组件之前收集特定的用户信息,并且所有页面 set/added 到堆栈。

否则根页面将无法正常构建。

这是 app.component.ts 文件中完整上下文中的更新代码:

import { Component, ViewChild, OnInit } from '@angular/core';
import { ModalController, Nav, Platform } from 'ionic-angular';
import { SettingsService } from './../services/settings';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from './../pages/home/home';
import { SignInPage } from './../pages/signin/signin';
import { CreatePage } from './../pages/create/create';
import { ProfilePage } from './../modals/profile/profile';

import firebase from 'firebase';

@Component({
  templateUrl: 'app.html'
})

export class MyApp implements OnInit {

  @ViewChild(Nav) nav: Nav;
  rootPage: any = HomePage;
  homePage: any = HomePage;
  signInPage: any = SignInPage;
  createPage: any = CreatePage;
  photoURL: string;

  constructor(private modalCtrl: ModalController,
              private platform: Platform, 
              private statusBar: StatusBar, 
              private splashScreen: SplashScreen,
              private settingsService: SettingsService) {
    this.initializeApp();
  }

  ngOnInit() {
    var config = {
      apiKey: "AIzaSyDmTh_LZuMPnn7nJRquoW5xWwgQ4Ia3J9E",
      authDomain: "thevault-ba308.firebaseapp.com",
      databaseURL: "https://thevault-ba308.firebaseio.com",
      projectId: "thevault-ba308",
      storageBucket: "thevault-ba308.appspot.com",
      messagingSenderId: "1024205108979"
    };

    firebase.initializeApp(config);

    var user = firebase.auth().currentUser;

    if (user) {
      console.log("User is already signed in.");
    } 
    else {
      console.log("No user is signed in.");
      let profileModal = this.modalCtrl.create(ProfilePage);
      profileModal.present();
      profileModal.onDidDismiss(() => {
        console.log("test pause.")
        this.photoURL = this.settingsService.getUserPhoto();
        console.log(this.settingsService.getUserName());
      })
    }
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

  openPage(page) {
    this.nav.setRoot(page);
  }

  signOut() {
    firebase.auth().signOut().then((result) => {
      console.log("Sign out success.");
      this.nav.setRoot(SignInPage);
    }).catch((error) => {
      console.log(error.message);
    });
  }

}

您应该在这个 modal.onDismiss() 部分中移动所有本应在模式关闭后执行的代码。像这样:

let profileModal = this.modalCtrl.create(ProfilePage);
profileModal.present();
profileModal.onDismiss((data) => {
    console.log("Data from modalPage :",data);
    console.log("test pause."); // Here you go. The code will be paused till the modal is dismissed.
});

此外,您可以通过 navParams 将数据传递到 modalPage,也可以使用 this.viewCtrl.dismiss(data);.

从 modalPage 检索数据

有关更多参考,请查看 this and this ionic 2 文档。

我能够通过在 app.html 文件中使用 *ngIf 来解决我的问题。

<ion-content *ngIf="photoURL != null">