IONIC 4 离子菜单未显示在离子菜单按钮单击上答案

【问题标题】：IONIC 4 ion-menu not showing on ion-menu-button clickIONIC 4 离子菜单未显示在离子菜单按钮单击上
【发布时间】：2019-12-09 21:34:32
【问题描述】：

我正在尝试在 Angular 6 应用程序中使用 ion-menu 添加侧边菜单，但是当我添加用于切换菜单的按钮并单击它时，没有任何反应。没有错误或任何东西。

// root ion-app 在哪里

<ion-app>  
  <ion-menu side="start" contentId="content" menuId="1">
    <ion-header>
      <ion-toolbar>
        <ion-title>
      Menu
    </ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
    <ion-menu-toggle>
      <ion-item>
        <ion-label>Menu item 1</ion-label>
      </ion-item>
        </ion-menu-toggle>
      </ion-list>
    </ion-content>
  </ion-menu>

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

// and the button in a different file from where we open the menu
  <ion-buttons slot="start">
    <ion-menu-button menu="1" autoHide="false"></ion-menu-button>
  </ion-buttons>

这应该是根据 ionic 4 文档显示/隐藏菜单所必需的。

【问题讨论】：

您能分享该文档的链接吗？

标签： angular ionic4

【解决方案1】：

我想您正在尝试手动添加侧边菜单。如果这是真的，您无需手动执行此操作。创建项目时，添加您要创建的项目类型。使用 blank、sidemenu、tabs 等关键字。命令如下ionic start myApp sidemenu。这将使用 sidemenu 创建项目，您无需手动操作。

希望这会有所帮助。

【讨论】：

【解决方案2】：

无需重新创建或从头开始您的应用程序，我昨天遇到了同样的问题，经过几个小时的努力并浏览了文档后，我设法让它按预期工作，这是我的代码，以防万一你

<ion-app>
  <ion-split-pane contentId="main-content">
    <ion-menu side="start" contentId="main-content" type="overlay">
        <ion-header>
          <ion-toolbar>
            <button ion-button menuToggle icon-only color="dark">
              <ion-icon name='close'></ion-icon>
            </button>
            <ion-title></ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content>
          <ion-list>
            <ion-item>
              <p class="ion-text-center">
                <ion-thumbnail item-center>
                  <img [src]="userImgProfile" class="menu-picture--profile" style="border-radius: 50%; margin: auto; display: block;">
                </ion-thumbnail>
              </p>
              <p class="ion-text-center">
                {{ usrName }}
              </p>
            </ion-item>
            <ion-menu-toggle auto-hide="false">
              <ion-item (click)="support()">
                <ion-icon slot="start" name="help-buoy"></ion-icon>
                <ion-label>
                  Soporte
                </ion-label>
              </ion-item>
            </ion-menu-toggle>
            <ion-menu-toggle auto-hide="false">
              <ion-item (click)="logout()">
                <ion-icon slot="start" name="power"></ion-icon>
                <ion-label>
                  Cerrar sesion
                </ion-label>
              </ion-item>
            </ion-menu-toggle>
          </ion-list>
        </ion-content>

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

在内页上，这是我正在使用的标题

<ion-header>
  <ion-toolbar hideBackButton="true">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      <span>
        Tus Negocios
      </span>
    </ion-title>
    <ion-buttons slot="end">
      <button ion-button icon-only (click)="support()" color="dark" style="color: #ff4500;">
        <ion-icon name='chatboxes'></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

【讨论】：