Ionic 2 - 同时有多个菜单（右 - 左）

Question

情况：

我的 Ionic 2 应用程序中有一个可用的右键菜单。我需要添加一个左侧菜单。我已经尝试过，但到目前为止没有成功。这是我的尝试：

代码:

使用此代码，右侧菜单可以正常工作，但不会出现左侧菜单。

app.html:

<ion-menu [content]="content" id="menu1">

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

    <ion-content>
        <ion-list>
            <button ion-item *ngFor="let p of pages" (click)="openPage(p)">
                {{p.title}}
            </button>
        </ion-list>
    </ion-content>

</ion-menu>


<ion-menu [content]="content" id="menu2">

  <ion-header>
    <ion-toolbar color="danger">
      <ion-title>Menu 2</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button ion-item menuClose="menu2" detail-none>
        Close Menu 2
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

app.component.ts:

constructor(
        public platform: Platform,
        public menu: MenuController
    ) {
        this.initializeApp();

        this.pages = [
            { title: 'Home', component: HomePage },
            { title: 'Login', component: LoginPage },
        ];

        this.menu.enable(true, 'menu1');
        this.menu.enable(true, 'menu2');
    }

问题：

如何让左右两个菜单同时正常工作？

Answer 1

就像你看到的here一样，你需要像这样添加side="left"和side="right"：

<ion-menu [content]="content" side="left" id="menu1">...</ion-menu>

和

<ion-menu [content]="content" side="right" id="menu2">...</ion-menu>

编辑：

感谢 @johnnyfittizio 提出意见！我已经做了你在那里提到的更改（如果我忘记了什么，请编辑这个答案）。

所以基本上我们只需要像这样添加两个菜单（例如，在 app.html 页面中）：

<ion-menu [content]="content" side="left" id="menu1">
  <ion-content>
    <ion-list>
      <button ion-item menuClose="menu1" detail-none>
        Close Menu 1
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-menu [content]="content" side="right" id="menu2">
  <ion-content>
    <ion-list>
      <button ion-item  menuClose="menu2" detail-none>
        Close Menu 2
      </button>
    </ion-list>
  </ion-content>
</ion-menu>



<ion-nav [root]="rootPage" #content></ion-nav>

然后我们需要在 header 中添加两个菜单按钮，如下所示：

<ion-header>
  <ion-navbar primary>
    <button ion-button menuToggle="left" start>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>
      HomePage
    </ion-title>
    <button ion-button menuToggle="right" end>
      <ion-icon name="menu"></ion-icon>
    </button>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <p>Home page</p>

</ion-content>

请注意每个按钮都有 menuToggle="left" 或 menuToggle="right" 属性以便能够切换正确的菜单。

Ionic 2 - 同时有多个菜单（右 - 左）

Ionic 2 - Multiple menu at the same time (right - left)

typescript

ionic-framework

ionic2

ionic3

angular