在 Ionic3 与 Ionic4 中处理硬件后退按钮 [英] Handling hardware back button in Ionic3 Vs Ionic4

问题描述

请在 ionic3 中找到以下 Android 硬件后退按钮操作代码.由于 Ionic4 使用角度路由进行导航，后退按钮的弹出事件将如何发生?如果我们想跳到最后一页我们可以使用下面的代码this.navCtrl.goBack('/products');.但是我们如何将它用于ionic4中的android硬件后退按钮操作?

Please find the below code for the Android hardware back button action in ionic3. As Ionic4 uses angular routing for navigation how the pop event will take place for the back button? If we want to pop to the last page we can use the following code this.navCtrl.goBack('/products');. But how we can use it for the android hardware back button action in ionic4?

this.platform.registerBackButtonAction(() => {
    let activePortal = this.ionicApp._loadingPortal.getActive() ||
        this.ionicApp._modalPortal.getActive() ||
        this.ionicApp._toastPortal.getActive() ||
        this.ionicApp._overlayPortal.getActive();
    if (activePortal) {
        activePortal.dismiss();
    } else {
        if (this.nav.canGoBack()) {
            ***this.nav.pop();***
        } else {
            if (this.nav.getActive().name === 'LoginPage') {
                this.platform.exitApp();
            } else {
                this.generic.showAlert("Exit", "Do you want to exit the app?", this.onYesHandler, this.onNoHandler, "backPress");
            }
        }
    }
});

推荐答案

更新: 此问题已在 v4.0.0-beta.8 (dfac9dc)

相关: registerBackButtonAction

这是在 GitHub 上的 标志性论坛和推特
在正式修复之前，您可以使用以下解决方法.

This is tracked on GitHub, in the Iconic Forum and Twitter
Until there is an official fix, you can use the workaround below.

使用 platform.backButton.subscribe(请参阅此处) platform.backButton.subscribeWithPriority(0, ...) 让 ionic 处理关闭所有 modals/alerts/... ，代码离子在 按下它自己的后退按钮和新的 路由器控制器 我们得到这样的东西:

Using platform.backButton.subscribe (see here) platform.backButton.subscribeWithPriority(0, ...) to let ionic handle closing all the modals/alerts/... , the code ionic uses when its own back button is pressed and the new router-controller together we get something like this:

import { ViewChild } from '@angular/core';
import { IonRouterOutlet, Platform } from '@ionic/angular';
import { Router } from '@angular/router';

//...

/* get a reference to the used IonRouterOutlet 
assuming this code is placed in the component
that hosts the main router outlet, probably app.components */
@ViewChild(IonRouterOutlet) routerOutlet: IonRouterOutlet;

constructor(
  ...
  /* if this is inside a page that was loaded into the router outlet,
  like the start screen of your app, you can get a reference to the 
  router outlet like this:
  @Optional() private routerOutlet: IonRouterOutlet, */
  private router: Router,
  private platform: Platform
  ...
) {
  this.platform.backButton.subscribeWithPriority(0, () => {
    if (this.routerOutlet && this.routerOutlet.canGoBack()) {
      this.routerOutlet.pop();
    } else if (this.router.url === '/LoginPage') {
      this.platform.exitApp(); 

      // or if that doesn't work, try
      navigator['app'].exitApp();
    } else {
      this.generic.showAlert("Exit", "Do you want to exit the app?", this.onYesHandler, this.onNoHandler, "backPress");
    }
  });
}

这篇关于在 Ionic3 与 Ionic4 中处理硬件后退按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！