Ionic 5 Capacitor 硬件后退按钮结束应用程序

Question

我在 phone 和 android 工作室测试我的离子应用程序时遇到问题，当我按下硬件后退按钮时应用程序立即退出，我已经尝试了很多解决方案，但它只是不会工作，也不会听我输入的任何代码。

这是我的尝试

import { Component, Renderer2, ViewChild } from '@angular/core';

import { IonRouterOutlet, Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { TranslateService } from '@ngx-translate/core';
import { Location } from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {

  @ViewChild(IonRouterOutlet, {static: true}) routerOutlet: IonRouterOutlet
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private renderer: Renderer2,
    private translate: TranslateService,
    private location: Location
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.translate.setDefaultLang( localStorage.getItem('default-language') ? localStorage.getItem('default-language') : navigator.language.slice(0, 2) )
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      this.backButtonEvent();
      if (localStorage.getItem('color-theme')) {
        this.renderer.setAttribute(document.body, 'color-theme', localStorage.getItem('color-theme'))
      } else {
        if(window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches === true) 
          this.renderer.setAttribute(document.body, 'color-theme', 'light')
        else
          this.renderer.setAttribute(document.body, 'color-theme', 'dark')
      }
    });
  }

  backButtonEvent() {
    this.platform.backButton.subscribeWithPriority(0, async () => {
      if(!this.routerOutlet.canGoBack())
        navigator["app"].exitApp()
      else
        this.location.back()
    });
  }


}

Answer 1

使用 @capacitor/app 包以这种方式尝试：

import { App } from '@capacitor/app';

App.addListener('backButton', ({ canGoBack }) => {
  if(canGoBack){
    window.history.back();
  } else {
    App.exitApp();
  }
});

Ionic 5 Capacitor 硬件后退按钮结束应用程序

Ionic 5 Capacitor hardware back button ending the app

android

ionic-framework

angular

capacitor

ionic5