在modal.present()

时间:2017-04-19 17:29:40

标签: ionic-framework ionic2 hybrid-mobile-app modalviewcontroller apache-cordova

原帖:

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

虽然模式仍在呈现中,但在被解雇之前,"测试暂停。"正被写入控制台。我需要它才能在模态被解除之后才被写入控制台。

注意:除了这一点,我一切正常。我还没弄明白如何完成“暂停”#39;直到模态被驳回。

有没有办法做到这一点?

澄清:

我在主应用组件的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);
    });
  }

}

2 个答案:

答案 0 :(得分: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中检索。

如需更多参考,请查看thisthis离子2文档。

答案 1 :(得分:0)

我可以使用app.html文件中的*ngIf来解决我的问题。

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