Ionic 5 菜单不显示答案

【问题标题】：Ionic 5 menu doesn't show upIonic 5 菜单不显示
【发布时间】：2020-07-01 16:31:40
【问题描述】：

我有一个演示应用程序，我想在其中插入一个菜单。不幸的是，我无法让这个菜单出现在标题中。我尝试了不同的方法，但找不到解决方案。

我的 app.component.html 如下所示：

<ion-app>
  <app-header></app-header>
  <ion-router-outlet id="main-content"></ion-router-outlet>
  <app-footer></app-footer>
</ion-app>

我的 header.component.html 是这样的：

<ion-menu side="start" contentId="main-content">
  <ion-header>
    <ion-toolbar color="primary">
      <ion-buttons slot="start">
        <ion-back-button></ion-back-button>
      </ion-buttons>
      <ion-title>
        My App
      </ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-item>
        <ion-label>Account</ion-label>
      </ion-item>
      <ion-item>
        <ion-label>Start game</ion-label>
      </ion-item>
      <ion-item>
        <ion-label>Scores</ion-label>
      </ion-item>
      <ion-item>
        <ion-label>Rules</ion-label>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

插入菜单后，菜单或标题不再出现。

我做错了什么？

【问题讨论】：

标签： angular ionic-framework angular-material ionic4 ionic5

【解决方案1】：

即使上下文丢失，也可以保留 ion-back-button 或 ion-menu-button 。从 Ionic 4 开始使用自动隐藏属性。

 <ion-menu-button auto-hide="false"></ion-menu-button>

【讨论】：

【解决方案2】：

你应该在 app.component.html 中插入这段代码

<ion-app>
  <ion-split-pane contentId="main-content">
    <ion-menu class="custom-menu" side="end" contentId="main-content">

      <ion-content>
        <ion-list class="menu-list" lines="none" no-padding>
          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages" class="menu-toggle-item">
            <ion-item lines="none" class="menu-item">
              <ion-label>
                {{p.title}}
              </ion-label>
              <!-- Lorem ipsum dolor sit amet consectetur adipisicing elit. -->
            </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>

在子页面内使用离子菜单按钮

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Title</ion-title>
  </ion-toolbar>
</ion-header>

【讨论】：