Cordova - Angular 4- 有没有办法重写 android 设备后退按钮答案

【问题标题】：Cordova - Angular 4- Is there any way to re-write android device back buttonCordova - Angular 4- 有没有办法重写 android 设备后退按钮
【发布时间】：2018-10-05 11:25:06
【问题描述】：

我正在开发一个应用程序，我已经在每个页面的标题中添加了一个后退图标。但我需要使用设备后退按钮实现相同的功能。每个页面都使用一些我无法在util.js 服务中访问的参数进行路由。

1. app.component.ts

ngOnInit() {
    document.addEventListener('deviceready', (evt) => this.onDeviceReady(evt), false);
    document.addEventListener('resume', (evt) => this.onResumeCall(evt), false);
    document.addEventListener('offline', this.inOfflineMode, false);
    document.addEventListener('online', this.inOnlineMode, false);
    document.addEventListener('backbutton', (evt) => this.onBackKeyDown(evt), false);
    this._config.init();
    this.analyticsService.updateAppOpenCount();
  }

在这里我可以使用另一个服务文件中实现的功能注册后退按钮事件。

2。 util.js

public deviceBackButton(): void {
        if (window.cordova) {
            if (window.location.hash === '#/') {
               // window.history.back();
               navigator.app.backHistory();
                navigator.app.exitApp();
            } else {
                window.history.back();
            }
        }

    }

这是一个后退按钮处理函数，在 util.js 中实现，不过是服务。我无法在此服务中注入组件。

我们是否有任何其他解决方法，以便我们可以使用 cordova 和 angular 4/6 在任何组件或页面中重写此后退按钮处理程序？

目前我可以从第一页返回，但从第二页开始应用程序视图变差。

【问题讨论】：

stackoverflow.com/questions/51729751/…

标签： android angular cordova cordova-plugins angular6

【解决方案1】：

我已经通过使用 HostListener 解决了问题...

我是按以下方式做的……

在您的控制器中实现以下方法。

@HostListener('window:popstate') backbuttonpressed() {
    console.log('back button pressed');
  }

要使用HostListener，您必须先导入它。

import { HostListener } from '@angular/core'

【讨论】：

【解决方案2】：

我还没有在 Angular、cordova 中做过这样的事情。但我在反应中做到了这一点。我已经搜索了cordova，我找到了这个。当用户按下设备后退按钮“backbutton”事件被触发尝试为此添加一个事件监听器。

document.addEventListener("backbutton", yourCallbackFunction, false);

yourCallbackFunction 将在用户按下设备返回按钮时触发。 https://cordova.apache.org/docs/en/1.6.0/cordova/events/events.backbutton.html

【讨论】：

不允许在 Angular 文件中添加 document.addEventListener