使用硬件后退按钮从特定页面使用 IONIC 3 退出应用程序开发答案

【问题标题】：Exit App develop using IONIC 3 from a specific page using Hardware Back Button使用硬件后退按钮从特定页面使用 IONIC 3 退出应用程序开发
【发布时间】：2018-04-04 20:52:19
【问题描述】：

我尝试使用硬件返回按钮从特定页面（HometabsPage）退出应用程序。我使用下面的代码：

  var lastTimeBackPress = 0;
  var timePeriodToExit = 2000;

  platform.registerBackButtonAction(() => {
    let view = this.nav.getActive();
    if (view.component.name == 'SignInPage' ) {
      if (new Date().getTime() - lastTimeBackPress < timePeriodToExit) {
        platform.exitApp(); //Exit from app
      } else {
        this.common.presentToast("Press back again to exit App?", "bottom");
        lastTimeBackPress = new Date().getTime();
      }
    } else {
      this.nav.pop({});
    }
  });

在我的应用程序中有两个部分 SignIn 和 Hometabs。上面的代码在 SignIn 页面上运行良好。

如果 (view.component.name == 'SignInPage' )

但我尝试使用“HometabsPage”而不是“SignInPage”，之后在所有页面中都显示 toast 消息。

请帮帮我。

【问题讨论】：

有点不清楚您要做什么。您可以添加您尝试过但不起作用的代码吗？通常，后退按钮执行“nav.pop()”。这意味着当您按下硬件后退按钮时，您希望有一个空堆栈来退出应用程序。
你能把这段代码放在 app.component.ts 中吗？
@user7722867 登录后，当我单击硬件后退按钮表单应用程序主页（选项卡）页面时，它会重定向到登录页面。但是如果用户单击后退按钮应用程序显示“再次按下以退出应用程序？”，我希望在登录后但它没有显示，因为上面的代码，它只显示在登录页面中
@Philip Brack 是的，我把代码放在 app.component.ts 中
遵循本指南。 gajotres.net/…

标签： ionic-framework ionic2 ionic3 back-button-control

【解决方案1】：

@Neotrixs 登录后，将 HomeTabsPage 设置为您的 Root Page。它会阻止您的应用返回 LoginPage。
对于硬件后退按钮，我通过以下方法做到了：

/* REGISTERING BACK BUTTON TO HANDLE HARDWARE BUTTON CLICKED */
  registerBackButton(){
    let backButton = this.platform.registerBackButtonAction(() => {
      var stackSize = this.nav.length();
      if(stackSize < 1)
        this.askForPressAgain();
      else
        this.nav.pop();  
    },1);

  }

  /*ASKING FOR PRESS BACK BUTTON AGAIN*/
  askForPressAgain(){
    let view = this.nav.getActive();
    if (view.component.name == 'ProjectsPage' || view.component.name == 'LoginPage') {
      if ((new Date().getTime() - this.lastTimeBackPress) < this.timePeriodToExit) {
        this.platform.exitApp(); //Exit from app
      } else {
        this.toast.showBottomToast(BACK_BTN_MESSAGE);
        this.lastTimeBackPress = new Date().getTime();
      }
    }

}

在上面的代码中，我首先检查了Stack Size，如果小于1，则显示Toast以确认离开应用程序。
希望对您或其他人有所帮助。

【讨论】：

【解决方案2】：

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({});
            }
        });
    });
}

【讨论】：