离子2：如何处理硬件后退按钮，检查应用程序中退出的确认

Posted 2021-04-21

我正面临着如何处理默认移动设备后退按钮的问题，该按钮在退出应用程序时检查确认，如果我按下后退按钮，则应调用一些显示弹出窗口的处理程序，以确认退出。或者有任何方法调用registerBackButtonAction（）？或者是如何在IONIC 2中使用它？请帮帮我。提前致谢。

答案

在app.component.ts中

        @ViewChild(Nav) nav: Nav;

        constructor(private platform: Platform, private toastCtrl:   ToastController, private alertCtrl: AlertController) {
            platform.ready().then(() => {
              // Okay, so the platform is ready and our plugins are available.
              // Here you can do any higher level native things you might need

              platform.registerBackButtonAction(() => {


                //uncomment this and comment code below to to show toast and exit app
                // if (this.backButtonPressedOnceToExit) {
                //   this.platform.exitApp();
                // } else if (this.nav.canGoBack()) {
                //   this.nav.pop({});
                // } else {
                //   this.showToast();
                //   this.backButtonPressedOnceToExit = true;
                //   setTimeout(() => {

                //     this.backButtonPressedOnceToExit = false;
                //   },2000)
                // }

                if(this.nav.canGoBack()){
                  this.nav.pop();
                }else{
                  if(this.alert){ 
                    this.alert.dismiss();
                    this.alert =null;     
                  }else{
                    this.showAlert();
                   }
                }
              });
            });

          }

          showAlert() {
          this.alert = this.alertCtrl.create({
            title: 'Exit?',
            message: 'Do you want to exit the app?',
            buttons: [
              {
                text: 'Cancel',
                role: 'cancel',
                handler: () => {
                  this.alert =null;
                }
              },
              {
                text: 'Exit',
                handler: () => {
                  this.platform.exitApp();
                }
              }
            ]
          });
          alert.present();
        }

          showToast() {
            let toast = this.toastCtrl.create({
              message: 'Press Again to exit',
              duration: 2000,
              position: 'bottom'
            });

            toast.onDidDismiss(() => {
              console.log('Dismissed toast');
            });

            toast.present();
          }

另一答案

Ionic最新版本3.xx

app.component.ts文件：

import { Platform, Nav, Config, ToastController } from 'ionic-angular';

constructor(public toastCtrl: ToastController, public platform: Platform) {
    platform.ready().then(() => {
        //back button handle
        //Registration of push in android and Windows Phone
        var lastTimeBackPress = 0;
        var timePeriodToExit  = 2000;

        platform.registerBackButtonAction(() => {
            // get current active page
            let view = this.nav.getActive();
            if (view.component.name == "TabsPage") {
                //Double check to exit app
                if (new Date().getTime() - lastTimeBackPress < timePeriodToExit) {
                    this.platform.exitApp(); //Exit from app
                } else {
                    let toast = this.toastCtrl.create({
                        message:  'Press back again to exit App?',
                        duration: 3000,
                        position: 'bottom'
                    });
                    toast.present();
                    lastTimeBackPress = new Date().getTime();
                }
            } else {
                // go to previous page
                this.nav.pop({});
            }
        });
    });
}

另一答案

这是我已经解决并运作的代码。谢谢大家。

constructor(platform: Platform,public alertCtrl: AlertController,public toastCtrl:ToastController) {
    platform.ready().then(()=>{
       platform.registerBackButtonAction(()=>this.myHandlerFunction());
       StatusBar.styleDefault();
      Splashscreen.hide();
})
  }

    myHandlerFunction(){
     let toast = this.toastCtrl.create({
      message: "Press Again to Confirm Exit",
      duration: 3000
    });
    toast.present(); 
     }

另一答案

Platform api有一个处理程序registerBackButtonAction。

你可以这样做：

在app.component.ts中

    constructor(platform: Platform){
     platform.ready().then(()=>{
       platform.registerBackButtonAction(()=>this.myHandlerFunction());
})


  myHandlerFunction(){
    //create alert
     }

另一答案

html：

<button (click)="exitApp()">Close application<button>

打字稿：

import {Platform} from 'ionic-angular';

@Page({ /*...*/ })
export MyPage {
 constructor(platform: Platform) {
  this.platform = platform;
 }
 exitApp(){
  this.platform.exitApp();
 }
}

另一答案

有点迟到了...但除了关闭推送的页面之外，还有更多的后退按钮，特别是对于带有多个标签页的项目。

有时页面不会被推入根页面，而是在其中一个标签页的navCtrl中。所以我们必须检查所有这些。

此外，如果没有打开任何页面或菜单，我们应该围绕最近使用的选项卡（类似于Instagram应用程序）并返回上一个选项卡。此外，我们不应该多次回到每个标签（类似于Instagram）

我从这里得到了答案的灵感，并创建了一个处理所有必要功能的综合方法：

• 侧边菜单：如果已打开，则关闭侧边菜单
• 推送页面：关闭可能已在任何选项卡页面的导航控制器上推送的任何页面
• 在选项卡之间切换：如果菜单已关闭，并且没有推送页面，则应使用堆栈将用户带回上一个最近使用的选项卡。
• 显示警报：如果之前没有使用过标签，则警告框应询问用户是否要退出。

细节在这个blog post

可以从my github下载演示代码。

另一答案

我通过做大量的研究设法创造了这个功能。希望能帮助到你。

    // I am using this.isExitAlertOpen just to make sure that the alert does not open if already open.

    handleBackButton() {
    this.platform.registerBackButtonAction(() => {
        // const activePortal =
        // this.ionicApp._modalPortal.getActive() ||
        // this.ionicApp._loadingPortal.getActive() ||
        // this.ionicApp._toastPortal.getActive() ||
        // this.ionicApp._overlayPortal.getActive();

        // console.warn('ACTIVE PORTALS', activePortal);

        const activeModal = this.ionicApp._modalPortal.getActive();
        console.warn('MODAL', activeModal);

activePortal可用于查找相关的活动门户，包括警报，加载程序，模态等。如果您想使用后退按钮处理所有内容，或者其中一些根据您的使用情况取消注释

在我的情况下，我只想检查模态是否有效，所以我只检查了模态。

        //  if (activePortal) {
        //    activePortal.dismiss();
        //  }

        if (activeModal) {
            activeModal.dismiss();
        } else if (this.nav.canGoBack()) {
            this.nav.pop();
        } else {
            if (this.isExitAlertOpen) return;
            this.isExitAlertOpen = true;
            this.showExitAlert();
        }
    });
}

showExitAlert() {
    this.alertCtrl.create({
        title: 'Exit',
        message: 'Are you sure you want to exit the app?',
        enableBackdropDismiss: false,
        buttons: [
            {
                text: 'Yes',
                handler: () => {
                    this.isExitAlertOpen = false;
                    this.platform.exitApp();
                }
            }, {
                text: 'Cancel',
                role: 'cancel',
                handler: () => {
                    this.isExitAlertOpen = false;
                }
            }
        ]
    }).present();
}