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

Question

我关注了一些不错的example，您可以在其中创建两个侧边菜单（右侧和左侧）在同一个应用程序中。上面链接中的示例基于 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 中单页上的两个侧边菜单的目标。

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

祝你有美好的一天..！