Angular 7 Cordova 8 后退按钮覆盖不起作用答案

【问题标题】：Angular 7 Cordova 8 backbutton override not workingAngular 7 Cordova 8 后退按钮覆盖不起作用
【发布时间】：2018-11-04 12:33:07
【问题描述】：

我正在使用 Angular 7 和 Cordova 8 开发一个应用程序。我想覆盖 cordova 后退按钮事件，以通过添加事件侦听器来防止应用程序关闭，如 cordova docs 中所述

我的代码如下所示：

let onDeviceReady = () => {
  enter code hereconsole.log("Bootstraping Module...")
  document.addEventListener("backbutton", (e) => {e.preventDefault(); e.stopPropagation(); console.log("backbutton"); return false;}, false);
  platformBrowserDynamic().bootstrapModule(AppModule);
};
document.addEventListener('deviceready', onDeviceReady, false);

根据文档，这应该会阻止应用关闭。我知道preventDefault、stopPropagation 和return false 调用不是必需的，但我找到了解决我的问题的可能方法，但这些都不起作用。

当我按下返回按钮时，我看到backbutton 打印，但是，应用程序仍在关闭。在 Android 上测试。

更新：使用 logcat 调试问题后，我可以看到消息WARNING: Back Button Default Behavior will be overridden. The backbutton event will be fired!，当在原生 Android 应用程序中覆盖后退按钮时，该消息记录在 CoreAndroid 插件类中。仍然当我按下按钮时，应用程序退出

更新：问题与 OnsenUI 有关，请参阅下面的回答

【问题讨论】：

我无法帮助您解决您的问题，但有一个提示：我知道 Ionic 团队处理后退按钮，所以您可能在他们的代码中找到您需要的 -> github.com/ionic-team/ionic

标签： android angular cordova onsen-ui angular7

【解决方案1】：

我们在 app.component.ts ngOnInit 中传递了后退按钮逻辑

import {Renderer2} from '@angular/core';

constructor(private renderer: Renderer2){}

ngOnInit(){

  const devicebackbutton = this.renderer.listen('document', 'backbutton', e => {
      e.preventDefault();
      e.stopPropagation();
      return false;
  });
}

【讨论】：

我得到与以前相同的行为：代码已执行，但应用程序仍然退出。您是否安装了我可能缺少的任何其他导入或节点模块？

【解决方案2】：

我设法解决了这个问题。它不是由 Cordova 或 Angular 引起的，而是由我用于输入组件的 OnsenUI 引起的。默认情况下，它会覆盖后退按钮的所有 cordova 处理程序，因为它提供了自己的功能。你可以阅读更多here

【讨论】：