在设备中测试时关闭离子菜单中的问题

Question

我是ionic4的新手。在此之前，我尝试在该菜单中的ionic3正常工作。 但是现在我迁移到ionic4。 我只是使用内置菜单选项创建新项目。它在网络浏览器中成功运行，但是当我在我的Android移动设备上运行时，菜单打开，但单击后没有关闭。

我使用： 离子版本：5.2.3 节点版本：v10.16.3 科尔多瓦版本：9.0.0

第一次尝试：我的应用程序组件.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>

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

Answer 1

查看离子菜单切换文档，它指出：

"如果希望保持离子菜单切换始终可见，可以将 autoHide 属性设置为 false。">

https://ionicframework.com/docs/api/menu-toggle

看起来您已将此设置为 false。您可以删除 auto-hide="false"，因为它默认为 true。