Cordova backbutton打破应用

Question

我有一个基于Angular 5+的Cordova Android应用程序的问题。 我发现window.history.back()和类似的本机JS返回函数会产生两个问题：

• 回去时，页面正在闪烁。 它似乎是第一个，所有HTML内容加载并在它之后
• 在一个关于后退动作的页面中，我的布局被打破了（下面的屏幕）

原始视图：

后退按钮：

什么是好奇的 - 在改变手机方向后所有都恢复正常。

我找到了一个解决方案 - 而不是使用我使用Angular Router创建的vanilla JS back函数：

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

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();
    }
  }

为我的inApp后退按钮实现此功能后，一切正常 - 没有闪烁或破坏布局。

虽然在为物理后退按钮实现此功能后，错误是相同的 - 布局中断或闪烁。 在我的实现下面：

服务：

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引擎版本，但没有任何积极的结果。

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

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

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