Question

我正在尝试使用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文档，必须全部显示/隐藏菜单。

Answer 1

我想您正在尝试手动添加补充菜单。如果是这样，则无需手动进行操作。在创建项目时，添加要创建的项目的类型。使用诸如blank，sidemenu，tabs之类的关键字。该命令类似于ionic start myApp sidemenu。这将创建带有补充菜单的项目，您无需手动进行。

希望这会有所帮助。

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

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

2 个答案: