Навигация не открывается в приложении Cordova Angular после использования аппаратной кнопки возврата - PullRequest
Новая
       5

Навигация не открывается в приложении Cordova Angular после использования аппаратной кнопки возврата

1 голос
/ 18 июня 2020

У нас есть приложение Angular, размещенное на веб-хостинге, которое мы загружаем в приложение Cordova и сталкиваемся с проблемой навигации (элемент nav-Element с * ngIf) после использования кнопки Android Назад.

Например: Случай 1:

  • Используйте кнопки и ссылки для навигации в приложении
  • Используйте обратную ссылку в приложении Angular, чтобы go вернуться на главную Экран
  • Nav открывается нормально, это нормально

Случай 2:

  • Навигация в приложении
  • Используйте аппаратную кнопку возврата на устройстве Android, чтобы go вернуться на главный экран
  • Nav не открывается, другие ссылки / кнопки все еще работают

Вот как мы загрузить приложение Angular

индекс Кордовы. html

<html>
    <head>
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: ... 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>Loading Application</title>
    </head>
    <body>
      <a id="bkpLink" href="...">
          <div class="app">
              <div id="deviceready" class="blink">
                  <p class="event listening">...</p>
                  <p class="event received">...</p>
              </div>
          </div>
        </a>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

индекс Кордовы. js

    // Application Constructor
    initialize: function() {
    this.bindEvents();
    },
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    onDeviceReady: function() {
        app.receivedEvent('deviceready');

        // Here, we redirect to the Angular web app.
        var targetUrl = "...";
        window.location.replace(targetUrl);
},
    // Note: This code is taken from the Cordova CLI template.
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }
};

app.initialize();

Заголовок в приложении Angular включает ссылку для открытия элемента управления меню (onToggle ()) 

<div class="header-wrapper row w-100 justify-content-center flex-shrink-0 d-flex">
    <div class="col-2 align-self-center p-2 header-sidemenu-toggle" (click)="onToggle()">
        <a id="header-collapsible-sidebar-btn">
            <span class="icon-menu-toggle"><fa-icon [icon]="faBars"></fa-icon></span>
        </a>
    </div>
    <div class="col-10 header-title-wrapper">
        <span class="header-title">{{title}}</span>
    </div>
</div>
<menu-control></menu-control>

В компоненте заголовка: 

  onToggle() {
      this.interactionService.toggleSidemenu();  // --> toggles showMenu
  }

MenuControl. html содержит элемент навигации, содержащий wi тонкий * ngIf 

<div class="row sidebar-container" *ngIf="showMenu">
    <nav id="sidebar-collapsible" class="sidebar-wrapper">
        <div *ngFor="let mainMenu of mainMenuConfig"> <!-- main Category: foreach -->
            <div class="sidebar-category-wrapper nav flex-column nav-pills">
                <div class="row sidebar-category">
                    <div *ngIf="mainMenu.i18nLabel">{{mainMenu.i18nLabel}}</div>
                    <div *ngIf="!mainMenu.i18nLabel">{{mainMenu.label}}</div>
                </div>
                <div class="nav-link sidebar-item-wrapper" *ngFor="let subMenu of getSubMenu(mainMenu)" (click)="onSubMenuSelect()" [routerLink]="[subMenu.path]" routerLinkActive="active"> <!-- sub menu: foreach -->
                    <div class="row sidebar-item">
                        <div class="col-12 sidebar-item-link-wrapper">
                            <a class="sidemenu-item-link">
                                <span *ngIf="subMenu.i18nLabel">{{subMenu.i18nLabel}}</span>
                                <span *ngIf="!subMenu.i18nLabel">{{subMenu.label}}</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>
</div>

Наконец, вот мой пакет. json для приложения cordova, на случай, если плагины вызовут проблемы 

{
    ...
    "dependencies": {
        "cordova-android": "^7.1.4",
        "cordova-plugin-compat": "^1.2.0",
        "cordova-plugin-honeywell-barcode-scanner": "0.0.12",
        "cordova-plugin-inappbrowser": "^3.2.0",
        "cordova-plugin-whitelist": "^1.3.4",
        "cordova-set-version": "^9.0.2",
        "phonegap-plugin-barcodescanner": "^8.1.0"
    },
    "cordova": {
        "plugins": {
            "cordova-plugin-whitelist": {},
            "cordova-plugin-inappbrowser": {},
            "phonegap-plugin-barcodescanner": {
                "ANDROID_SUPPORT_V4_VERSION": "27.+"
            },
            "cordova-plugin-honeywell-barcode-scanner": {}
        },
        "platforms": [
            "android"
        ]
    },
    ...
}
...