Ionic 3：使用手机的后退按钮关闭模式答案

【问题标题】：Ionic 3 : Close modal with phone's back buttonIonic 3：使用手机的后退按钮关闭模式
【发布时间】：2017-10-10 08:46:35
【问题描述】：

我尝试在我的 Ionic 应用程序中覆盖手机的后退按钮。

如果我不在页面中，此代码允许我打开一个模式来关闭应用程序，否则关闭页面。

但这不允许我关闭打开的模式。如何检测我是否处于关闭模式？

platform.registerBackButtonAction(() => {

      let nav = app.getActiveNav();
      let activeView: ViewController = nav.getActive();
      console.log(activeView);

      if(activeView != null){
        if(nav.canGoBack()) {
          activeView.dismiss();
        } else{
          let alert = this.alertCtrl.create({
            title: this.pdataManager.translate.get("close-app"),
            message: this.pdataManager.translate.get("sure-want-leave"),
            buttons: [
              {
                text: this.pdataManager.translate.get("no"),
                handler: () => {
                  this.presentedAlert = false;
                },
                role: 'cancel',
              },
              {
                text: this.pdataManager.translate.get("yes"),
                handler: () => {
                  this.presentedAlert = false;
                  this.platform.exitApp();
                }
              }
            ]
          });
          if(!this.presentedAlert) {
            alert.present();
            this.presentedAlert = true;
          }
        }
      }
    });
  }

【问题讨论】：

标签： javascript android cordova ionic3

【解决方案1】：

1.Import IonicApp：

import {IonicApp } from 'ionic-angular';

2.添加到你的构造函数：

  private ionicApp: IonicApp

3.在你的 platform.registerBackButtonAction 中添加：

let activeModal=this.ionicApp._modalPortal.getActive();
if(activeModal){
     activePortal.dismiss();
      return;
   }

我在这里找到了答案： https://github.com/ionic-team/ionic/issues/6982

【讨论】：

【解决方案2】：

您可以为模态框指定页面名称，并且可以从应用程序的任何位置访问它。试试这个..

import { App } from 'ionic-angular';

    constructor(public app: App){

    }

        platform.registerBackButtonAction(() => {

              let nav = this.app.getActiveNav();
              let view = nav.getActive().instance.pageName;


              if (view == YOU_PAGE_NAME) {
                //You are in modal
              } else {
                //You are not in modal
              }
        });

在你的模式中

pageName = 'YOU_PAGE_NAME';

【讨论】：

【解决方案3】：

最后我的后退按钮有这个：

constructor(private platform: Platform, private config: ConfigService, private nfc: NfcService, private alertCtrl: AlertController,
      public events: Events, private translate: TranslateService, private fetch: ConfigFetchService, private menuList: MenuList, private ionicApp: IonicApp,
      private menuCtrl: MenuController
   ) {
      platform.ready().then(() => {
         this.config.pullVersion();
         let ready = true;

         platform.registerBackButtonAction(() => {
            Logger.log("Back button action called");

            let activePortal = ionicApp._loadingPortal.getActive() ||
               ionicApp._modalPortal.getActive() ||
               ionicApp._toastPortal.getActive() ||
               ionicApp._overlayPortal.getActive();

            if (activePortal) {
               ready = false;
               activePortal.dismiss();
               activePortal.onDidDismiss(() => { ready = true; });

               Logger.log("handled with portal");
               return;
            }

            if (menuCtrl.isOpen()) {
               menuCtrl.close();

               Logger.log("closing menu");
               return;
            }

            let view = this.nav.getActive();
            let page = view ? this.nav.getActive().instance : null;

            if (page && page.isRootPage) {
               Logger.log("Handling back button on a home page");
               this.alertCtrl.create({
                  title: translate.instant('Confirmation'),
                  message: translate.instant('Do you want to exit?'),
                  buttons: [
                     {
                        text: translate.instant('Cancel'),
                        handler: () => {
                        }
                     },
                     {
                        text: translate.instant('OK'),
                        handler: () => {
                           platform.exitApp();
                        }
                     }
                  ]
               }).present();
            }
            else if (this.nav.canGoBack() || view && view.isOverlay
            ) {
               Logger.log("popping back");
               this.nav.pop();
            }
            else if (localStorage.getItem('is_logged_in')
            ) {
               Logger.log("Returning to home page");
               this.nav.setRoot(HomePage);
            }
            else if (!localStorage.getItem('is_logged_in')) {
               Logger.log("Not yet logged in... exiting");
               platform.exitApp();
            }
            else {
               Logger.log("ERROR with back button handling");
            }

         }, 1);

....

【讨论】：