我是ionic4的新手。在此之前,我尝试ionic3在该菜单中正常工作。但是现在我迁移到ionic4。我只是使用内置菜单选项创建新项目。它可以在网络浏览器中成功运行,但是当我在Android移动设备上运行时,菜单打开,但是单击后菜单没有关闭。
我使用:离子版本:5.2.3节点版本:v10.16.3科尔多瓦版本:9.0.0
首次尝试:我的app.component.html文件:
<ion-app>
<ion-menu type="overlay"side="start" contentId="menu-content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
<ion-item [routerDirection]="'root'" [routerLink]="[p.url]" *ngFor="let p of appPages" (click)="togglemenu()">
<ion-icon slot="start" [name]="p.icon"></ion-icon>
<ion-label>
{{p.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet main id="menu-content"></ion-router-outlet>
</ion-app>
我的app.component.ts文件:
import { Component } from '@angular/core';
import { Platform,MenuController } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss']
})
export class AppComponent {
public appPages = [
{
title: 'Home',
url: '/home',
icon: 'home'
},
{
title: 'List',
url: '/list',
icon: 'list'
}
];
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
public menu: MenuController,
private statusBar: StatusBar
) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
togglemenu(){
this.menu.close();
console.log("clikc");
}
}
第二次尝试:
<ion-app>
<ion-split-pane contentId="menu-content" side="start">
<ion-menu type="overlay">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
<ion-item [routerDirection]="'root'" [routerLink]="[p.url]" *ngFor="let p of appPages">
<ion-icon slot="start" [name]="p.icon"></ion-icon>
<ion-label>
{{p.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
</ion-split-pane>
</ion-app>
我的设备上发生了同样的问题。它在webview上运行良好,但是当我在API级别为24(7.0)且未关闭侧边菜单的仿真器上运行时