在 modal.present() 期间暂停 MyApp

Posted 2023-02-23

【中文标题】在 modal.present() 期间暂停 MyApp

【英文标题】：Pause MyApp during modal.present()

【发布时间】：2017-04-19 17:29:40

【问题描述】：

原帖：

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

【参考方案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 文档。

【讨论】：

谢谢，但我需要更具体一些。我在主应用程序组件的 ngOnInit() 中呈现模式。原因是因为我在加载主组件之前需要特定的用户信息。不幸的是，在登录过程完成并且模式被解除之前，您的答案不会暂停主要组件的加载。它只是在模式被解除时执行某些命令——这是不一样的。因此，我需要的数据处理得太晚了。

1.如果它是您的主要应用程序组件，则不需要模式。相反，您可以在构造函数中通过this.rootPage = ProfilePage 设置该页面。 2.不管是主app组件，modaldismiss后需要遵循的代码都可以到这里。因为这可能是在您在开始时调用模态页面的构造函数中，其余的一切都在onDismiss() 部分中进行。我认为您的代码的某些流程是从构造函数等另一个流程中执行的。

【参考方案2】：

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

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