Angular 在同一个Ionic 2应用程序中集成两个侧菜单

我一直在关注一些好的东西，你可以在同一个应用程序中创建两个侧菜单（右菜单和左菜单）。上面链接中的示例基于Ionic版本1，但我正在Ionic v2中寻找相同的示例

预期的

当我们点击左菜单按钮时，它应该打开左菜单（如果已经打开，它应该关闭右菜单）

当我们点击右键时，应该打开右侧菜单（如果已经打开，应该关闭左侧菜单）

app.html

<ion-menu [content]="content">
    <ion-header>
        <ion-toolbar>
            <ion-title>LEFT MENU</ion-title>
        </ion-toolbar>
    </ion-header>

    <ion-content>                             
        <ion-list>
            <ion-item menuClose>
                <ion-icon name=""></ion-icon>
                ABC
                <ion-icon name="contact" item-right></ion-icon>
            </ion-item>
            <ion-item menuClose>
                <ion-icon name=""></ion-icon>
                XYZ
                <ion-icon name="person" item-right></ion-icon>
            </ion-item>

            <ion-list-header>User</ion-list-header>
            <ion-item menuClose>
                <ion-icon name=""></ion-icon>
                Forget Password
                <ion-icon name="key" item-right></ion-icon></ion-item>
            <ion-item menuClose>
                <ion-icon name=""></ion-icon>
                Logout
                <ion-icon name="lock" item-right></ion-icon>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-menu>

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

<ion-header>
  <ion-toolbar color="danger">
    <button ion-button menuToggle icon-only (click)="openMenu()">
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>WELCOME</ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="openUserProfile()">
        <ion-icon name="person"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content padding>

</ion-content>

welcome.html

<ion-menu [content]="content">
    <ion-header>
        <ion-toolbar>
            <ion-title>LEFT MENU</ion-title>
        </ion-toolbar>
    </ion-header>

    <ion-content>                             
        <ion-list>
            <ion-item menuClose>
                <ion-icon name=""></ion-icon>
                ABC
                <ion-icon name="contact" item-right></ion-icon>
            </ion-item>
            <ion-item menuClose>
                <ion-icon name=""></ion-icon>
                XYZ
                <ion-icon name="person" item-right></ion-icon>
            </ion-item>

            <ion-list-header>User</ion-list-header>
            <ion-item menuClose>
                <ion-icon name=""></ion-icon>
                Forget Password
                <ion-icon name="key" item-right></ion-icon></ion-item>
            <ion-item menuClose>
                <ion-icon name=""></ion-icon>
                Logout
                <ion-icon name="lock" item-right></ion-icon>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-menu>

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

<ion-header>
  <ion-toolbar color="danger">
    <button ion-button menuToggle icon-only (click)="openMenu()">
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>WELCOME</ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="openUserProfile()">
        <ion-icon name="person"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content padding>

</ion-content>

请用一些好的例子和概念来指导我

---

提前感谢您。

添加了一些代码，我已经实现了目标

app.html

<ion-menu [content]="content">
    <ion-header>
        <ion-toolbar>
            <ion-title>LEFT MENU</ion-title>
        </ion-toolbar>
    </ion-header>

    <ion-content>                             
        <ion-list>
            <ion-item menuClose>
                <ion-icon name=""></ion-icon>
                ABC
                <ion-icon name="contact" item-right></ion-icon>
            </ion-item>
            <ion-item menuClose>
                <ion-icon name=""></ion-icon>
                XYZ
                <ion-icon name="person" item-right></ion-icon>
            </ion-item>

            <ion-list-header>User</ion-list-header>
            <ion-item menuClose>
                <ion-icon name=""></ion-icon>
                Forget Password
                <ion-icon name="key" item-right></ion-icon></ion-item>
            <ion-item menuClose>
                <ion-icon name=""></ion-icon>
                Logout
                <ion-icon name="lock" item-right></ion-icon>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-menu>

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

<ion-header>
  <ion-toolbar color="danger">
    <button ion-button menuToggle icon-only (click)="openMenu()">
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>WELCOME</ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="openUserProfile()">
        <ion-icon name="person"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content padding>

</ion-content>

描述：添加两个侧面为左/右的菜单并提供id

就这样。我们已经实现了在Ionic 2中处理单页双面菜单的目标

伙计们，如果你们有更好的建议，请指导我们

---

祝你有愉快的一天

您还可以使用menutogle=“left”/menutogle=“right”作为用于显示菜单的按钮/元素的属性（如果您只有2个）。感谢@LucianoFantuzzi的宝贵输入。同时，这也是处理多个菜单显示位置的完美方式。

import { Component } from '@angular/core';
import { NavController, NavParams, MenuController } from 'ionic-angular';

@Component({
  selector: 'page-welcome',
  templateUrl: 'welcome.html'
})
export class WelcomePage {

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams, 
    public menu: MenuController) {

    menu.enable(true);

  }  

  openMenu(evt) {
      if(evt === "main"){
         this.menu.enable(true, 'menu1');
         this.menu.enable(false, 'menu2');
      }else{
         this.menu.enable(true, 'menu2');
         this.menu.enable(false, 'menu1');
      }
      this.menu.toggle();
  }

}