Ionic 离子切换菜单不关闭Android设备上的侧边菜单

vfh0ocws  于 2022-12-16  发布在  Ionic
关注(0)|答案(3)|浏览(209)

我有一个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上无法关闭
任何帮助都很感激,希望我提供了足够的信息。
--编辑(添加应用程序组件.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
  }
}
ig9co6j1

ig9co6j11#

请看这个。它讨论了这个问题:https://github.com/ionic-team/ionic/issues/19354
他们建议将@ionic/angular更新为4.11.2。这并不适用于所有人,但另一个适用于某些人的建议解决方案是:

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

vatpfxk52#

您需要导入MenuController,然后在按钮中使用它:
打印稿:

...
import { ToastController } from '@ionic/angular';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.scss'],
})
export class MenuComponent implements OnInit {
  constructor(
    public menu: MenuController
  ) {}
}

html:

<ion-menu side="end" menuId="first" contentId="main">
  <ion-content>
    <ion-list>
      <ion-item button (click)="this.menu.close()" routerLink="/home">
        <ion-icon name="home-outline" color="primary"></ion-icon>
        Home
      </ion-item>
      <ion-item button (click)="this.menu.close()" routerLink="/my-profile">
        <ion-icon name="person-circle-outline" color="primary"></ion-icon>
        My Profile
      </ion-item>
    </ion-list>
  </ion-content>
</ion-menu>
2izufjch

2izufjch3#

请给予以下代码:

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

您混合了两种可能的方法。一种方法是在html中添加ion-menu-toggle。另一种方法是在app.component.ts添加切换方法,并在app.component.html中添加单击事件。您已经在app.component.ts中添加了切换方法,但尚未在app.component.html中的上添加单击事件

相关问题