Cordova приложение разрыва кнопки

Question

У меня проблема с Android-приложением Cordova на основе Angular 5+.Я обнаружил, что window.history.back() и аналогичные встроенные функции возврата JS создают две проблемы:

• при возврате страница мигает.Кажется, что сначала все содержимое HTML загружается, а после него CSS
• На одной странице с задним действием мой макет не работает (скриншоты ниже)

Вид оригинала:

После кнопки возврата:

Что любопытно - после изменения ориентации телефона все спины на нормальные.

IЯ нашел решение - вместо того, чтобы использовать ванильные функции возврата JS, которые я создал, используя Angular Router:

Я подписался на события маршрутизатора и сохранил все маршруты:

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 engine, но без каких-либо положительных результатов.

Кроме того, я хочу работать с новейшими доступными библиотеками.

Спасибо за любую помощь в этом случае.

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