如何使用设备返回按钮退出Ionic 4应用程序？

Question

我希望在安卓设备上按下返回按钮时，能够关闭应用程序，但是没有反应。后来我在主页上写了以下代码，这个主页被载入到我的标签页中，现在它能够正常关闭应用程序。但问题是无论在哪个页面都会关闭应用程序，请帮忙解决！

ionViewDidEnter() {
    this.subscription = this.platform.backButton.subscribe(() => {
      navigator["app"].exitApp();
    });
  }
  ionViewDidLeave() {
    this.subscription.unsubscribe();
  }

- Hussain Arthuna

Answer 1

使用设备后退按钮退出Ionic4应用程序

我尝试了这种方法，对我来说运作良好。

当视图进入时，我会将其订阅到变量中，当其离开时取消订阅。因此，仅为该特定页面执行在后退按钮上退出应用程序。

constructor(private platform: Platform){}
backButtonSubscription;
ionViewWillEnter() {
  this.backButtonSubscription = this.platform.backButton.subscribe(async () => {
  navigator['app'].exitApp();
  });
 }
}
ionViewDidLeave() {
 this.backButtonSubscription.unsubscribe();
}

- Ashish

Answer 2

更新的答案

在Ionic4中，有一些不同之处。他们添加了subscribeWithPriority()功能。

您可以使用此代码片段，在主页上设置后退按钮以退出：

 this.platform.backButton.subscribeWithPriority(1, () => {
        navigator['app'].exitApp();
 });

您可以轻松地在这个功能上加入一个 toast，要么设定一个超时时间，在短时间内按两次后退出，要么添加确认按钮以退出。

原始回答

虽然可能有点冒险，但我最近也在找类似的东西。

我想实现的功能是“再按一次返回键退出”。我在一些应用程序中看到过它的存在。

通常情况下，当用户按返回键回到应用程序的开头时会触发这个功能。然后再按一次就会显示一个 toast 警告他们再往后退一步就会退出应用程序。这可以防止用户意外退出应用程序。

我知道你正在寻找 Ionic 4，并且我也在使用它进行编码，但我找到的标记为 Ionic 3。它没有提到 Ionic 4，即使它已经更新到最近2个月前，所以如果您仍在尝试解决这个问题，我猜您应该尝试一下：

• https://github.com/heidji/ionic3-android-backbutton

另外，我是在 Ionic Framework 论坛的一个长时间讨论的结尾处发现了这个。

- rtpHarry

Answer 3

如果您的意图是只在主页上并在双击返回按钮后退出应用程序，这里是适合我的解决方案，其中一部分代码来自https://www.youtube.com/watch?v=Ntql-JPIQW8。

代码

import { Component, ViewChild } from "@angular/core";
import { IonRouterOutlet, Platform, ToastController } from "@ionic/angular";
import { Location } from "@angular/common";

export class AppComponent {
  private lastBackTime: number = 0;
  private intervalExitApp: number = 2000;
  @ViewChild(IonRouterOutlet, { static: true }) routerOutlet: IonRouterOutlet;

  constructor(
    private platform: Platform,
    private toastController: ToastController,
    private location: Location
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.backButtonEvent();
    });
  }

  private backButtonEvent() {
    this.platform.backButton.subscribeWithPriority(10, () => {
      let currentTime = new Date().getTime();
      console.log("currentTime", currentTime);
      console.log("lastBackTime -> ", this.lastBackTime);
      console.log("Subtraction -> ", currentTime - this.lastBackTime);
      if (
        !this.routerOutlet.canGoBack() &&
        this.lastBackTime &&
        this.lastBackTime > 0 &&
        currentTime - this.lastBackTime < this.intervalExitApp
      ) {
        navigator["app"].exitApp();
        return;
      }
      if (!this.routerOutlet.canGoBack()) {
        this.createToastExitApp();
      } else {
        this.location.back();
      }
      console.log("backButton.subscribeWithPriority");
    });
  }

  private createToastExitApp() {
    this.toastController
      .create({
        message: this.getStringFromTranslateService(
          "toastMessage.message.exitApp"
        ),
        duration: 2000,
        color: "primary",
      })
      .then((toastEl) => {
        toastEl.present();
        this.lastBackTime = new Date().getTime();
      });
  }
}

- Michele Ordile

---

欢迎来到 Stack Overflow！尽管你的答案可能解决了问题，但包括解释如何以及为什么可以解决问题，真的有助于提高您的帖子质量，并可能导致更多点赞。请记住，您正在回答未来的读者，而不仅仅是现在提问的人。您可以编辑您的答案以添加解释，并给出适用的限制和假设。- 来自审核 - Adam Marshall

Answer 4

试试这个。 在 AppComponent 中的 initializeApp 函数中添加

this.platform.backButton.subscribeWithPriority(0, () => {
navigator['app'].exitApp();
});

例如

initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      this.platform.backButton.subscribeWithPriority(0, () => {
        navigator['app'].exitApp();
       
     });
    });
  }

- Shuhad zaman

---

那我需要取消订阅吗？ - M. Mariscal