¿Como tener dos side menu distintos en dos pages distintas con Ionic 2?

publicado por: Anonymous

Estoy haciendo una aplicación donde en el root debe tener un side menu con 3 botones, y al hacer un navCtrl.push(), en la segunda page debe tener otro side menu distinto al de la page root

¿como puedo hacer esto?

<ion-menu id="menu1" side="left" [content]="miNav" padding> 
    <ion-header>
        <ion-toolbar>
            <ion-title>Menu 1</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-list no-lines>
            <ion-item>
                <button ion-button clear icon-start (click)="funcion1Menu1()">
                    <ion-icon name="star"></ion-icon>
                    Boton 1
                </button>
            </ion-item>
            <ion-item>
                <button ion-button clear icon-start (click)="funcion2Menu1()">
                    <ion-icon name="star"></ion-icon>
                    Boton 2
                </button>
            </ion-item>
            <ion-item>
                <button ion-button clear icon-start (click)="funcion3Menu1()">
                    <ion-icon name="star"></ion-icon>
                    Boton 3
                </button>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-menu>


<ion-menu id="menu2" side="left" [content]="miNav" padding> 
    <ion-header>
        <ion-toolbar>
            <ion-title>Menu 1</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-list no-lines>
            <ion-item>
                <button ion-button clear icon-start (click)="funcion1Menu2()">
                    <ion-icon name="star"></ion-icon>
                    Page 1
                </button>
            </ion-item>
            <ion-item>
                <button ion-button clear icon-start (click)="funcion2Menu2()">
                    <ion-icon name="star"></ion-icon>
                    Page 2
                </button>
            </ion-item>
            <ion-item>
                <button ion-button clear icon-start (click)="funcion3Menu2()">
                    <ion-icon name="star"></ion-icon>
                    Page 3
                </button>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-menu>

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

solución

Te he creado un ejemplo básico con 2 menus diferentes: Ver Demo

En el momento de abrir la página 2 (Page2) te carga el menu 2 y puedes volver al home en el 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>

Te lo he creado con setRoot() (más simple):

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

Y en cuando habrás dicha página se activa el menu deseado:

# 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'); 
  }
}
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *