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 您的 cmets！我已经进行了您在此处提到的更改（如果我忘记了什么，请编辑此答案）。

所以基本上我们只需要像这样添加两个菜单（例如，在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>

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

<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" 属性，以便能够切换正确的菜单。