Ionic 处理菜单中的按钮打开模态后的硬件后退按钮

camsedfj  于 2022-12-16  发布在  Ionic
关注(0)|答案(2)|浏览(150)

我有一个侧菜单的应用程序。
在这个菜单上有一个div tappable,它打开了一个Modal,作为一个伪选择框

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

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

    modal.present();

**问题是:**如果用户点击后退按钮,它不会(立即)关闭模态。首先它关闭了侧菜单(模态后面),然后如果我再次点击它关闭模态。

我想它应该先关上Modal ...有什么帮助吗?

1u4esq0p

1u4esq0p1#

您可以覆盖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();
      }
   }
}
62lalag4

62lalag42#

如果我理解正确,模态有一个后退按钮,但它不是自定义后退按钮,对吗?您可以使用事件(单击)将此按钮更改为自定义按钮,并在模态.ts文件中使用viewController dismiss,而不是在导航中返回。

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>

相关问题