在 modal.present() 期间暂停 MyApp

Question

原帖：

我正在编写一个 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.")

当模态框仍在呈现时，在它被关闭之前，“测试暂停”。正在写入控制台。在模式被解除之前，我需要它不要被写入控制台。

注意：除了这一点，我的一切都正常工作。在模式被解除之前，我还没有弄清楚如何完成“暂停”。

有什么办法吗？

---

澄清：

我在主应用程序组件的ngOnInit() 中呈现模式。我这样做是因为我需要在加载主应用程序组件并将任何页面设置/添加到堆栈之前收集特定的用户信息。

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

以下是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);
    });
  }

}

Answer 1

您应该在此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 和this ionic 2 文档。

Answer 2

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

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