Cordova 返回按钮导致应用程序崩溃

Question

我遇到了一个关于基于 Angular 5+ 和 Cordova 的 Android 应用程序的问题。我发现 window.history.back() 等原生 JS 返回函数会出现两个问题：

• 回退时页面会闪烁。似乎首先加载所有 HTML 内容，然后是 CSS
• 在某个页面上返回时，我的布局会错乱（如下图）

原始视图：

返回按钮后：

有趣的是 - 改变手机方向后一切都恢复正常。

我找到了解决方法 - 不再使用原始的 JS 返回函数，而是利用 Angular 路由创建自己的返回函数：

我订阅路由事件并保存所有路由：

this._subs.push(this._router.events.subscribe((e) => {
      if (e instanceof NavigationEnd) {
        this._cordovaService.saveRoute(e.url);
      }
    }));

如果我想返回，我使用 navigateByUrl 函数：

back(): void {
    const lastRoute = this._routingHistory[this._routingHistory.length - 2];
    if (lastRoute) {
      this._router.navigateByUrl(lastRoute);
      this._routingHistory.pop();
    }
  }

在为我的应用程序内部返回按钮实现此功能后，一切正常-没有闪烁或破坏布局。

尽管如此，在为我的物理返回按钮实现此功能后，错误仍然存在-布局会破裂或闪烁。以下是我的实现：

服务：

this.deviceReady = Observable.fromEvent(document, 'deviceready').publishReplay(1);
    (this.deviceReady as ConnectableObservable<Event>).connect();
    this.restore = Observable.fromEvent(document, 'resume').publishReplay();
    (this.restore as ConnectableObservable<Event>).connect();
    this.backbutton = Observable.fromEvent(document, 'backbutton').publishReplay();
    (this.backbutton as ConnectableObservable<Event>).connect();

使用它:

this._subs.push(this._cordovaService.deviceReady.subscribe(
      () => {
        document.addEventListener('backbutton', function (e) {
          e.preventDefault();
          e.stopPropagation();
          this._cordovaService.back();
        }.bind(this), false);
      }
      )
    );

我确定backbutton中的函数被执行了（我已经记录了一些信息），但问题仍然存在。

更多信息：

- 我正在使用cordova版本8.0.0 - 我正在使用以下插件：

https://github.com/TheMattRay/cordova-plugin-wkwebviewxhrfix.git" /> 一些提示：

曾经，我构建了Cordova的Android应用程序，它们运行得很好（带有本地JS后退功能），但在下一次构建之后，所有东西都回来了。在hockeyapp中，我看到在良好工作版本中最低可用的Android版本是4.1。在新应用程序中，它是4.4。

我尝试降级Cordova / android引擎版本，但没有任何积极的结果。

此外，我想使用最新可用的库。

感谢您在这种情况下提供的任何帮助。

- Czeran

Answer 1

我终于找到了解决方案，基于以下博客文章：http://weblogs.thinktecture.com/thomas/2017/02/cordova-vs-zonejs-or-why-is-angulars-document-event-listener-not-in-a-zone.html ，我在导入cordova.js之前添加了下面的脚本：

   <script>
    (function () {
      'use strict';

      window.addEventListener = function () {
        EventTarget.prototype.addEventListener.apply(this, arguments);
      };

      window.removeEventListener = function () {
        EventTarget.prototype.removeEventListener.apply(this, arguments);
      };

      document.addEventListener = function () {
        EventTarget.prototype.addEventListener.apply(this, arguments);
      };

      document.removeEventListener = function () {
        EventTarget.prototype.removeEventListener.apply(this, arguments);
      };
    })();
  </script>
  <script type="text/javascript" src="cordova.js"></script>

关于为什么会出现这个错误的更多信息，您可以在此GitHub问题中阅读：https://github.com/angular/angular/issues/22509

- Czeran