离子菜单模板未在移动设备上显示答案

【问题标题】：Ionic Menu Template not showing on mobile离子菜单模板未在移动设备上显示
【发布时间】：2021-12-15 01:42:59
【问题描述】：

我使用他们页面上的向导创建了我的 Ionic 应用程序，并选择了模板“菜单”。如果我在桌面版本中查看我的应用程序，完全可以，您可以在这里看到：Desktop view OK 但是如果我在浏览器（Firefox）中切换到“移动视图”，菜单不会显示？？正如你在这里看到的：Mobile view no menu

这是我的菜单 html 代码：

    <ion-app>
  <ion-split-pane contentId="main-content">
    <ion-menu contentId="main-content" type="overlay">
      <ion-content>
        <ion-list id="inbox-list">
          <ion-list-header>Netzwerkverwaltung</ion-list-header>
          <ion-note></ion-note>

          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
            <ion-item  routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" routerLinkActive="selected">
              <ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
              <ion-label>{{ p.title }}</ion-label> 
            </ion-item>
          </ion-menu-toggle>
        </ion-list>

      </ion-content>
    </ion-menu>
    <ion-router-outlet id="main-content"></ion-router-outlet>
  </ion-split-pane>
</ion-app>

【问题讨论】：

标签： html angular typescript ionic-framework

【解决方案1】：

您将ion-menu 放在ion-split-pane 中。

所以可见性取决于窗户的宽度！

你可以从手机的边缘滑动打开你的侧边菜单菜单的一侧。
使用menuController.toggle()
或者在ion-header中使用ion-menu-button！

菜单隐藏在小屏幕上！！

文档：

IonMenuButton：https://ionicframework.com/docs/api/menu-button

菜单切换：https://ionicframework.com/docs/api/menu-toggle

菜单控制器：https://ionicframework.com/docs/v4/api/menu-controller

【讨论】：