我有一个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
}
}
3条答案
按热度按时间ig9co6j11#
请看这个。它讨论了这个问题:https://github.com/ionic-team/ionic/issues/19354
他们建议将@ionic/angular更新为4.11.2。这并不适用于所有人,但另一个适用于某些人的建议解决方案是:
vatpfxk52#
您需要导入MenuController,然后在按钮中使用它:
打印稿:
html:
2izufjch3#
请给予以下代码:
您混合了两种可能的方法。一种方法是在html中添加
ion-menu-toggle
。另一种方法是在app.component.ts
中添加切换方法,并在app.component.html
中添加单击事件。您已经在app.component.ts
中添加了切换方法,但尚未在app.component.html
中的项上添加单击事件。