ionic-framework - 在菜单内的按钮打开模式后处理硬件后退按钮

Question

我有一个带侧边菜单的应用。

在这个菜单上有一个 div tappable 可以打开一个 Modal，它为我提供了一个伪选择框

    let modal = this.modalCtrl.create('SelectPage');

    modal.onDidDismiss(option => {
      this.updateSelection(option);
    });

    modal.present();

问题是:如果用户点击后退按钮，它不会(立即)关闭模态框。首先它会关闭侧边菜单(在模式后面)然后如果我再次点击它会关闭 de Modal。

我认为它应该先关闭模态...有什么帮助吗？

Answer 1

您可以覆盖 Android 后退按钮的功能。这可以使用 this.platform.registerBackButtonAction 来完成，但是当您这样做时，您需要自己添加它的所有功能。这包括关闭覆盖门户(模式、 toast 、警报)、从导航堆栈弹出页面、关闭侧面菜单、关闭应用程序以及转到上一个选项卡。除了前面的选项卡外，我已经包括了所有这些。如果您想尝试这样做，请参阅 https://hackernoon.com/handling-android-back-button-in-ionic-33f7cfbba4b9

让模态框关闭的另一个资源是 https://github.com/ionic-team/ionic/issues/6982

// app.component.ts
exitToast: Toast;
lastTimeBackPress = 0;
timePeriodToExit = 2000;

constructor(public platform: Platform,
          public toastCtrl: ToastController,
          private ionicApp: IonicApp,
          private menu: MenuController) {
    this.initializeApp();
}

initializeApp() {
   this.platform.ready().then(() => {
      this.platform.registerBackButtonAction(() => {
         if (this.exitToast !== undefined) {
            this.exitToast.dismiss().then(() => {
               this.closeOpenItem();
            });
         } else {
            this.closeOpenItem();
         }
      });
   });
}

closeOpenItem() {
   let activePortal = this.ionicApp._loadingPortal.getActive() ||
    this.ionicApp._modalPortal.getActive() ||
    this.ionicApp._toastPortal.getActive() ||
    this.ionicApp._overlayPortal.getActive();
   if (activePortal) {
      activePortal.dismiss();
     activePortal.onDidDismiss(() => {
     });
   } else if (this.menu.isOpen()) {
      this.menu.close();
   } else if (this.nav.canGoBack()) {
      this.nav.pop();
   } else {
      if (new Date().getTime() - this.lastTimeBackPress < 
          this.timePeriodToExit) {
         this.platform.exitApp();
      } else {
         this.exitToast = this.toastCtrl.create({
            message: 'Press back button again to exit',
            duration: 1000,
            position: 'top'
         });
         this.lastTimeBackPress = new Date().getTime();
         this.exitToast.present();
      }
   }
}