0

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

我使用：离子版本：5.2.3 节点版本：v10.16.3 Cordova 版本：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>
4

1 回答 1

0

查看它指出的 ion-menu-toggle 文档：

“如果希望保持 ion-menu-toggle 始终可见，可以将 autoHide 属性设置为 false。”

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

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

于 2019-10-22T17:12:31.827 回答