如何在同一页面上制作两个 Ionic 侧边菜单？离子

Question

我正在做一个离子项目，我想要一个左菜单和一个右菜单，以及中间的内容。

我的问题是我只能放置一个离子菜单。我尝试将两者都放置，但只出现一个。

我遇到的问题我放在哪里，因为离子文档上的两个菜单都有一个。

这是我的代码：

菜单：1：

<ion-split-pane contentId="main" >
  <!--  the side menu  -->
  <ion-menu side="start" menu-id="test1">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
  </ion-menu>

  <!-- the main content -->
  <ion-router-outlet id="main"></ion-router-outlet>
</ion-split-pane> 

菜单 2：

<ion-split-pane contentId="main" >
  <!--  the side menu  -->
  <ion-menu side="start" menu-id="test1">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
  </ion-menu>

  <!-- the main content -->
  <ion-router-outlet id="main"></ion-router-outlet>
</ion-split-pane>

主要内容：

<ion-header>
  <ion-toolbar>
    <ion-title>Receitas</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
    <ion-menu-button slot="start">TEste</ion-menu-button>
    <ion-menu-button slot="end">TEste</ion-menu-button>
</ion-content>

这些在单独的文件中。

我想要这个：

但是当我运行页面时，只显示一个菜单，即开始菜单。

Answer 1

您需要向 app.component.html 添加另一个 ion-menu 并确保添加“side”属性：

<ion-app>
  <ion-split-pane contentId="main-content">
    <ion-menu side="start" contentId="main-content" type="overlay">
      <ion-content>
        <ion-list id="inbox-list">
          <ion-list-header>Inbox</ion-list-header>
          <ion-note>hi@ionicframework.com</ion-note>

          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
            <ion-item (click)="selectedIndex = i" routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" [class.selected]="selectedIndex == i">
              <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-list id="labels-list">
          <ion-list-header>Labels</ion-list-header>

          <ion-item *ngFor="let label of labels" lines="none">
            <ion-icon slot="start" ios="bookmark-outline" md="bookmark-sharp"></ion-icon>
            <ion-label>{{ label }}</ion-label>
          </ion-item>
        </ion-list>
      </ion-content>
    </ion-menu>

    <ion-router-outlet id="main-content"></ion-router-outlet>
    
    <ion-menu side="end" contentId="main-content" type="overlay">
      <ion-content>
        <ion-list id="inbox-list">
          <ion-list-header>Inbox</ion-list-header>
          <ion-note>hi@ionicframework.com</ion-note>

          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
            <ion-item (click)="selectedIndex = i" routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" [class.selected]="selectedIndex == i">
              <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-list id="labels-list">
          <ion-list-header>Labels</ion-list-header>

          <ion-item *ngFor="let label of labels" lines="none">
            <ion-icon slot="start" ios="bookmark-outline" md="bookmark-sharp"></ion-icon>
            <ion-label>{{ label }}</ion-label>
          </ion-item>
        </ion-list>
      </ion-content>
    </ion-menu>
  </ion-split-pane>
</ion-app>

现在为了在每个页面中显示菜单按钮，您需要添加另一个 ion-menu-button 并使用“menu”属性来指示它控制哪一侧：

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button menu="start"></ion-menu-button>
    </ion-buttons>
    <ion-title>{{ folder }}</ion-title>
    <ion-buttons slot="end">
      <ion-menu-button menu="end"></ion-menu-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

上面我使用了标准的sidemenu ionic app（ionic start，然后选择sidemenu app template）