如何在同一页面上制作两个 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 并确保添加 \xe2\x80\x9cside\xe2\x80\x9d 属性：

\n

<ion-app>\n  <ion-split-pane contentId="main-content">\n    <ion-menu side="start" contentId="main-content" type="overlay">\n      <ion-content>\n        <ion-list id="inbox-list">\n          <ion-list-header>Inbox</ion-list-header>\n          <ion-note>hi@ionicframework.com</ion-note>\n\n          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">\n            <ion-item (click)="selectedIndex = i" routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" [class.selected]="selectedIndex == i">\n              <ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>\n              <ion-label>{{ p.title }}</ion-label>\n            </ion-item>\n          </ion-menu-toggle>\n        </ion-list>\n\n        <ion-list id="labels-list">\n          <ion-list-header>Labels</ion-list-header>\n\n          <ion-item *ngFor="let label of labels" lines="none">\n            <ion-icon slot="start" ios="bookmark-outline" md="bookmark-sharp"></ion-icon>\n            <ion-label>{{ label }}</ion-label>\n          </ion-item>\n        </ion-list>\n      </ion-content>\n    </ion-menu>\n\n    <ion-router-outlet id="main-content"></ion-router-outlet>\n    \n    <ion-menu side="end" contentId="main-content" type="overlay">\n      <ion-content>\n        <ion-list id="inbox-list">\n          <ion-list-header>Inbox</ion-list-header>\n          <ion-note>hi@ionicframework.com</ion-note>\n\n          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">\n            <ion-item (click)="selectedIndex = i" routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" [class.selected]="selectedIndex == i">\n              <ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>\n              <ion-label>{{ p.title }}</ion-label>\n            </ion-item>\n          </ion-menu-toggle>\n        </ion-list>\n\n        <ion-list id="labels-list">\n          <ion-list-header>Labels</ion-list-header>\n\n          <ion-item *ngFor="let label of labels" lines="none">\n            <ion-icon slot="start" ios="bookmark-outline" md="bookmark-sharp"></ion-icon>\n            <ion-label>{{ label }}</ion-label>\n          </ion-item>\n        </ion-list>\n      </ion-content>\n    </ion-menu>\n  </ion-split-pane>\n</ion-app>\n

\n

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

\n

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

\n

上面我使用了标准侧菜单离子应用程序（离子启动，然后选择侧菜单应用程序模板）

\n