typescript - Cómo añadir un segundo menú lateral desde el otro lado

¿Cómo puedo agregar un segundo sidemenu? Tengo el sidemenu normal en el lado izquierdo que funciona muy bien. Ahora quiero agregar un segundo sidemenu con opciones de filtrado.

Respuesta #1

Tal como puedes leer en MenuToggle de la documentación de Ionic2, puedes hacerlo primero creando dos ion-menu en tu app.html (o donde quieras definir el segundo menú)

<ion-menu [content]="content" side="left" id="menu1">

  <ion-toolbar secondary>
    <ion-title>Menu 1</ion-title>
  </ion-toolbar>

  <ion-content>
    <ion-list>
      <button ion-item menuClose="menu1" detail-none>
        Close Menu 1
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

<ion-menu [content]="content" side="right" id="menu2">

  <ion-toolbar danger>
    <ion-title>Menu 2</ion-title>
  </ion-toolbar>

  <ion-content>
    <ion-list>
      <button ion-item menuClose="menu2" detail-none>
        Close Menu 2
      </button>
    </ion-list>
  </ion-content>

Por favor, observe los atributos side="left" y side="right" en el elemento ion-menu. Los usaremos más adelante para saber qué menú debe abrirse (el atributo id también podría usarse de la misma manera).

Luego, en tu página, añade a cada menuToggle qué menú debe abrirse asignándole el atributo side que definimos antes (o el id si prefieres hacerlo de esa manera).

<ion-header>
  <ion-navbar primary>
    <button menuToggle="left" start>
      <ion-icon name="menu">L</ion-icon>
    </button>
    <button menuToggle="right" end>
      <ion-icon name="menu">R</ion-icon>
    </button>
    <ion-title>
      Multiple Menus in Ionic2
    </ion-title>
  </ion-navbar>
</ion-header>

Puedes encontrar un plnuker que funcione aquí.

ACTUALIZACIÓN:

Para probar, simplemente moví el main de app.html al archivo html de una página map.html. No cambié los lados ni los ids. Pero el menú no aparece al hacer clic en el botón (tampoco han sido cambiados)

He hecho eso en este plunker. Ahora, la HomePage tiene el menú a la derecha definido allí en ese archivo html.

<ion-menu [content]="content" side="right" id="menu2">
  <ion-toolbar danger>
    <ion-title>Menu 2</ion-title>
  </ion-toolbar>
  <ion-content>
    <ion-list>
      <button ion-item menuClose="menu2" detail-none>
        Close Menu 2
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-header>
  <ion-navbar primary>
    <button menuToggle="left" start>
      <ion-icon name="menu">L</ion-icon>
    </button>
    <button menuToggle="right" end>
      <ion-icon name="menu">R</ion-icon>
    </button>
    <ion-title>
      Multiple Menus in Ionic2
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content #content padding>

</ion-content>

Por favor, observe la variable content en el elemento <ion-content>. Como puede leer en la documentación de Ionic:

Para agregar un menú a una aplicación, el elemento debe ser agregado como un hermano del contenido al que pertenece. Se debe agregar una variable local al elemento de contenido y pasarla al elemento del menú en la propiedad de contenido. Esto indica al menú a qué contenido está conectado, para que sepa qué elemento observar para los gestos.