How to have two different side menus in two different pages with Ionic 2?

I have created a basic example with 2 different menus: See Demo

At the moment of opening the page 2 (Page2) loads menu 2 and you can return to home in menu 1.

# app.component.html :

<ion-menu id="menu1" [content]="miNav" padding> 
    <ion-header>
        <ion-toolbar>
            <ion-title>Menu 1</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list no-lines>
          <button ion-item menuClose="menu1" (click)="openPage('Page2')" detail-none>
              Abrir Pagina 2
          </button>
        </ion-list>
    </ion-content>
</ion-menu>


<ion-menu id="menu2" [content]="miNav" padding> 
    <ion-header>
        <ion-toolbar>
            <ion-title>Menu 2</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-list no-lines>
          <button ion-item menuClose="menu2" (click)="openPage('home')" detail-none>
              Abrir Pagina 1
          </button>
        </ion-list>
    </ion-content>
</ion-menu>

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

I created it with setRoot() (simplest):

# app.component.ts :

import { Component, ViewChild } from '@angular/core';
import { HomePage } from './pages/home/home';
import { Page2Page } from './pages/page2/page2';
import { Nav } from 'ionic-angular';

@Component({
  templateUrl: './app/app.component.html'
})
export class AppComponent {

  @ViewChild( Nav ) nav: Nav;

  rootPage = HomePage;

  openPage( page ) {

        let setPage: object;

        switch ( page ) {
          case 'home':
                setPage = HomePage;
                break;
            case 'Page2':
                setPage = Page2Page;
                break;
        }

        this.nav.setRoot( setPage );
    }
}

And once you have said page, the desired menu is activated:

# home.ts :

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

@Component({
  templateUrl: './app/pages/home/home.html'
})
export class HomePage {

  constructor( public menu: MenuController ) {
    this.menu1Active();
  }

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

# page2.ts :

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

@Component({
  templateUrl: './app/pages/page2/page2.html'
})
export class Page2Page {

  constructor(public menu: MenuController) {
    this.menu2Active();
  }

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

In this way, solve it, simpler:

At the moment of opening the page 1 (homePage) opens the menu of the home, when you go to page 2 (Page2) load menu 2 and you can return to home in menu 1.

# app.component.html :

<ion-menu id="menuHome" [content]="miNav" padding> 
    <ion-header>
        <ion-toolbar>
            <ion-title>Menu Home</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list no-lines>
          <button ion-item menuClose (click)="xFuncion()" detail-none>
              Contenido del menu Home
          </button>
        </ion-list>
    </ion-content>
</ion-menu>


<ion-menu id="menuPage2" [content]="miNav" padding> 
    <ion-header>
        <ion-toolbar>
            <ion-title>Menu Page 2</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-list no-lines>
          <button ion-item menuClose (click)="yFuncion()" detail-none>
              Contenido del menu Page 2
          </button>
        </ion-list>
    </ion-content>
</ion-menu>

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

And once you have the page Page2Page or HomePage the desired menu is activated:

# home.html

<ion-header>

  <ion-navbar>
    <ion-title>Home Page</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
      <button ion-item (click)="openPage('Page2')">
          Abrir Pagina 2
      </button>
</ion-content>

# home.ts :

import { Component } from '@angular/core';
import { MenuController, NavController } from  'ionic-angular';
import { Page2Page } from './pages/page2/page2';

@Component({
  templateUrl: './app/pages/home/home.html'
})
export class HomePage {

  constructor( public navCtrl: NavController , public menu: MenuController ) {
    this.activarMenuHome();
  }

  activarMenuHome() {
    var menus = this.menuCtrl.getMenus();
    for (var i = menus.length - 1; i >= 0; i--) {
        menus[i].enabled = false;
    }
    this.menuCtrl.enable(true,'menuHome); 
  }

  ionViewDidEnter(){
    this.activarMenuHome();
  }

  openPage() {
    this.navCtrl.push( Page2Page );
  }
}

# page2.html

<ion-header>

  <ion-navbar>
    <ion-title>Pagina 2</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
      Contenido.... pagina 2
</ion-content>

# page2.ts :

import { Component } from '@angular/core';
import { MenuController } from  'ionic-angular';
import { HomePage } from '../pages/home/home';

@Component({
  templateUrl: './app/pages/page2/page2.html'
})
export class Page2Page {

  constructor( public navCtrl: NavController , public menuCtrl: MenuController ) {
  }

  activarMenuPage2() {
    var menus = this.menuCtrl.getMenus();
    for (var i = menus.length - 1; i >= 0; i--) {
        menus[i].enabled = false;
    }
    this.menuCtrl.enable(true,'menuPage2); 
  }
  ionViewDidEnter(){
    this.activarMenuPage2();
  }
  openPage() {
      this.navCtrl.push( Page2Page );
  }
}