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

Question

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

在这个菜单上有一个 div tappable 可以打开一个 Modal，它为我提供了一个 psedo-select 框

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

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

    modal.present();

问题是：如果用户点击后退按钮，它不会（立即）关闭模态框。首先它会关闭 Sidemenu（在模式后面）然后如果我再次点击它会关闭 de Modal。

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

Answer 1

您可以覆盖 Android 后退按钮的功能。这可以使用 this.platform.registerBackButtonAction 来完成，但是当您这样做时，您需要自己添加它的所有功能。这包括关闭覆盖门户（模式、吐司、警报）、从导航堆栈弹出页面、关闭侧面菜单、关闭应用程序以及转到上一个选项卡。除了前面的选项卡外，我已经包括了所有这些。如果您想尝试这样做，请参阅 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();
      }
   }
}

Answer 2

如果我做对了，模式有一个后退按钮，但它不是自定义后退按钮，对吧？您可以将此按钮更改为带有事件（单击）的自定义按钮，并在 modal.ts 文件中使用 viewController 关闭，而不是返回导航。

import { IonicPage, NavController, NavParams, ViewController } from "ionic-angular";


constructor(
        public navCtrl: NavController,
        public navParams: NavParams,
        public viewCtrl: ViewController) {
}
dismiss() {
    this.viewCtrl.dismiss();
}

在html

<ion-navbar>
    <ion-title>Title</ion-title>
    <ion-buttons end> 
        <a (click)="dismiss()"><ion-icon class="fa fa-close fa-2x"></ion-icon></a> 
    </ion-buttons>
</ion-navbar>

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

Handling hardware Backbutton after a Button inside a Menu opens a Modal

ionic-framework

ionic2

ionic3