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

Question

我遵循了一个很好的示例，在该示例中，您可以在同一应用程序中创建两个侧菜单（右侧和左侧）。上面链接中的示例基于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>

app.component.js

import { Component } from '@angular/core';
import { Nav } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';

import { WelcomePage } from '../pages/welcome/welcome';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {

  rootPage: any = WelcomePage;

  constructor(public platform: Platform) {}

}

welcome.html

<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.ts

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() {
    this.menu.toggle();
  }

  openUserProfile(){
      // how to open another (right) menu
  }

}

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

预先感谢您。

Answer 1

很少添加代码，我已经达到了目标。

app.html

说明：添加两个带有side ='left / right'的菜单并提供ID

<ion-menu [content]="content" side="left" id="menu1">
    <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>               
    </ion-content>
</ion-menu>

<ion-menu [content]="content" side="right" id="menu2">
    <ion-header>
        <ion-toolbar color="danger">
            <ion-title>USER PROFILE</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-list>
            <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>

app.component.js

app.js没有变化

welcome.html

说明：定义单击事件，该事件使用参数调用函数。当两个侧面菜单都调用同一个函数时，我们传递一些参数，以便在welcome.ts中，我们可以使用这些参数打开特定侧面菜单的

<ion-header>
  <ion-toolbar color="danger">
    <ion-buttons left>
        <button ion-button icon-only (click)="openMenu('main')">
            <ion-icon name="menu"></ion-icon>
        </button>
    </ion-buttons>
    <ion-title>WELCOME</ion-title>
    <ion-buttons end>
        <button ion-button icon-only (click)="openMenu('user')">
            <ion-icon name="contact"></ion-icon>
        </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content padding>

</ion-content>

welcome.ts

说明：在基于我们获取的参数的“ openMenu”函数中，让我们添加“ IF”条件，该条件将负责处理要调用哪个侧边菜单。要打开特定菜单，请按照以下代码中的定义将该菜单启用设置为“ true”，将其他菜单设置为“ false”

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();
  }

}

就是这样了。我们已经实现了在Ionic 2的单个页面上处理两个侧面菜单的目标。

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

祝你有美好的一天..！