Question

我有一个带有补充菜单的应用程序。

在此菜单上，有一个div tappable打开一个模态，用作我的psedo选择框

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

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

    modal.present();

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

我认为应该先关闭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>

菜单内的按钮打开模态后处理硬件Backbutton

2 个答案: