Ионное меню переключения не закрывает боковое меню на устройстве Android

Question

У меня есть проект Ionic 4, и я использую боковое меню. Там есть кнопка меню, которая открывает меню, и в меню есть список пунктов меню, при выборе которого пункт меню закрывает боковое меню. Это работает в браузере, но не на устройстве. Меню откроется, но не закроется.

Мое боковое меню находится в моем app.component.html

<ion-app>
  <ion-menu side="start" type="push" contentId="content1">
      <ion-header>
        <ion-toolbar color="primary">
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content class="light-grey">
        <ion-list>
          <ion-item (click)="toggleMenu()" [routerLink]="['/home']" routerLinkActive="active-link">Home</ion-item>
          <ion-item (click)="toggleMenu()" [routerLink]="['/dashboard']" routerLinkActive="active-link">Dashboard</ion-item>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet id="content1" main></ion-router-outlet>
</ion-app>

Вот пример домашней страницы

<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-menu-button autoHide="false" menuToggle></ion-menu-button>
          </ion-buttons>
        <ion-title>
         Opportunity Forms
        </ion-title>
    </ion-toolbar>
  </ion-header>

<ion-content>
  <ion-refresher slot="fixed"  (ionRefresh)="ionRefresh($event)" >
      <ion-refresher-content 
          pulling-icon="arrow-dropdown"
          pulling-text="Pull to refresh"
          refreshing-spinner="circles"
          refreshing-text="Refreshing...">
      </ion-refresher-content>
    </ion-refresher>
  <ion-card> 
      <ion-card-content>


      </ion-card-content>
    </ion-card>
</ion-content>

Вот скриншот приложения

Работает в Chrome Версия 77.0.3865.90 Протестировано и меню не закрывается на Android 9

Любая помощь приветствуется, надеюсь, ямы предоставили достаточно информации.

- Изменить (добавление app.component.ts) -

import { Component } from '@angular/core';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import {MenuController} from '@ionic/angular';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private menu: MenuController,
    private route: Router
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }
  toggleMenu() {
    this.menu.toggle(); //Add this method to your button click function
  }
}

Answer 1

Пожалуйста, посмотрите это. Здесь обсуждается проблема: https://github.com/ionic-team/ionic/issues/19354

Они предлагают обновить @ ionic / angular до 4.11.2. Это не работает для всех, но другое предлагаемое решение, которое работает для кого-то:

<ion-menu-toggle menu="first" autoHide="false">

Answer 2

Пожалуйста, попробуйте следующий код:

<ion-app>
    <ion-menu side="start" type="push" contentId="content1">
        <ion-header>
          <ion-toolbar color="primary">
            <ion-title>Menu</ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content class="light-grey">
          <ion-list>
            <ion-item (click)="toggleMenu()" [routerLink]="['/home']" routerLinkActive="active-link">Home</ion-item>
            <ion-item (click)="toggleMenu()" [routerLink]="['/dashboard']" routerLinkActive="active-link">Dashboard</ion-item>
          </ion-list>
        </ion-content>
      </ion-menu>
      <ion-router-outlet id="content1" main></ion-router-outlet>
</ion-app>

Вы смешали два возможных способа. Одним из способов является добавление ion-menu-toggle в HTML. Другой способ - добавить метод переключения в app.component.ts и добавить событие щелчка в app.component.html. Вы уже добавили метод переключения в штамп app.component.ts, но вы не добавили событие щелчка для предметов в app.component.html. .

Answer 3

Вы можете принудительно закрыть меню, используя MenuController

Например

import { MenuController } from '@ionic/angular';

constructor( public menuCtrl: MenuController) {}


 openMenu() {
   this.menuCtrl.open();
 }

 closeMenu() {
   this.menuCtrl.close();
 }

 toggleMenu() {
   this.menuCtrl.toggle();
 }

Для получения дополнительной информации проверьте документы: Документы меню