web-dev-qa-db-fra.com

Ionic le menu à bascule ne ferme pas le menu latéral sur Android appareil

J'ai un projet Ionic 4 et j'utilise un menu latéral. Il y a un bouton de menu qui ouvre le menu, et dans le menu est une liste de choix de menu, lorsque sélectionné le menu- choix ferme le menu latéral. Cela fonctionne dans un navigateur, mais pas sur un appareil. Le menu s'ouvrira, mais ne se fermera pas.

Mon menu latéral est dans mon 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>

Voici un exemple de la page d'accueil

<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>

Voici une capture d'écran de l'application

enter image description here

Fonctionne en Chrome Version 77.0.3865.90 Testé et le menu ne se ferme pas sur Android 9

Toute aide est appréciée, j'espère avoir fourni suffisamment d'informations.

- Modifier (en ajoutant 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
  }
}
androidangularionic-frameworkprogressive-web-apps
5
Austin Jones

Veuillez voir ceci. Il discute du problème: https://github.com/ionic-team/ionic/issues/19354

Ils suggèrent de mettre à jour @ ionic/angular en 4.11.2. Cela n'a pas fonctionné pour tout le monde, mais une autre solution proposée qui a fonctionné pour quelqu'un est la suivante:

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

Veuillez essayer le code suivant:

<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>

Vous avez mélangé deux façons possibles. Une façon consiste à ajouter ion-menu-toggle en html. Une autre façon consiste à ajouter une méthode à bascule dans app.component.ts et pour ajouter un cliquez sur l'événement dans le app.component.html. Vous avez déjà ajouté la méthode bascule dans die app.component.ts, mais vous n'avez pas ajouté un click event sur le items dans le app.component.html ..

0
Sean Stayn