硬件后退按钮关闭启用 Tab 的 Ionic 3 应用程序上的应用程序

Question

当用户点击 my profile 页面（或选项卡）时，用户未登录然后显示 login page 如图所示 below.On login page header back button 并且工作正常（你可以看到下面的代码）。当用户点击 hardware back button on Android device 时我需要相同的功能。但是它关闭了 app.Can 你告诉我如何解决这个问题？如果您需要更多信息，请告诉我。

我的-profile.ts

constructor(public navCtrl: NavController, public app: App, public userService: UserService
        ) {
        if (!this.userService.userDetails) {
            this.app.getRootNav().setRoot('Login', { profile: true });
            return;
        }
    }

login.ts

constructor(public navCtrl: NavController, public navParams: NavParams) {
        this.profile = this.navParams.data.profile;
    }

    back() {
        if (this.profile) {//not logged in user
            this.navCtrl.setRoot('TabsPage');
        }
    }

login.html

<ion-header>
  <ion-navbar>
    <ion-buttons left>
      <button ion-button *ngIf="profile" (click)="back()" tappable><ion-icon name="arrow-back"></ion-icon></button>
    </ion-buttons>
    <ion-title>login</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

</ion-content>

Answer 1

当用户按下本机后退按钮时，您可以使用平台的 registerBackButtonAction() 方法来处理。

import { Platform } from 'ionic-native';
...
constructor(public platform: Platform){

  platform.registerBackButtonAction(() => {
    if (navCtrl.canGoBack()) { // CHECK IF THE USER IS IN THE ROOT PAGE.
      navCtrl.pop(); // IF IT'S NOT THE ROOT, POP A PAGE.
    } else {
      platform.exitApp(); // IF IT'S THE ROOT, EXIT THE APP.
    }
  });

}

但是这里的情况是你在设置根目录而不是推送页面，所以这是 Ionic 的正常行为，当在根页面并且没有任何东西可以弹出时，应用程序关闭。

在这种情况下，您可以在 login.ts

上执行类似的操作

platform.registerBackButtonAction(() => {
  this.back();
});

所以每次用户进入登录页面并点击硬件后退按钮时，它只需调用您的 back() 方法即可将根目录设置到另一个页面。

希望这对您有所帮助。

Answer 2

只需将文件 app.module.ts 中的属性 navExitApp 设置为 false at imports

IonicModule.forRoot(YourApp, {
  navExitApp: false
}),

简单！您不需要触摸 registerBackButtonAction 事件。

硬件后退按钮关闭启用 Tab 的 Ionic 3 应用程序上的应用程序

Hardware back button closes the app on Tab enabled Ionic 3 app

android

ionic-framework

ionic2

ionic3

angular