Как добавить второй sidemenu с другой стороны

Question

Как добавить второй sidemenu? У меня нормальный sidemenu с левой стороны, который отлично работает. Теперь я хочу добавить второй sidemenu с параметрами фильтра.

Answer 1

Так же, как вы можете прочитать в MenuToggle from Ionic2 docs вы можете сделать это первым созданием двух ion-menu в вашем app.html (или там, где вы хотите, чтобы определить второе меню)

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

Пожалуйста, обратите внимание на side="left" и side="right" атрибутов в элементе ion-menu. Мы будем использовать это позже, чтобы узнать, какое меню должно быть открыто (атрибут id можно также использовать таким же образом).

Затем на вашей странице, добавьте к каждому menuToggle, какое меню должно быть открыто, присвоив ему атрибут side мы определили ранее (или id, если вы предпочитаете, чтобы сделать это).

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

Вы можете найти working plnuker here.

---

UPDATE:

Для тестирования я просто переехал главный из app.html другу страницы HTML файла map.html. Я не менял сторон или ids. Но меню не появляется при нажатии кнопки (также были не изменены)

Я сделал это в this plunker. Теперь у HomePage есть меню справа, определенное там в этом файле hmtl.

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

Пожалуйста, обратите внимание на content переменную в <ion-content> элемента. Как вы можете прочитать в Ionic docs:

Чтобы добавить меню в приложение, элемент должен быть добавлен как брат к содержанию он принадлежит. Локальная переменная должна быть добавлена ​​в элемент контента и передана элементу меню в свойстве содержимого. Это сообщает меню, содержание которого составляет , поэтому он знает, какой элемент следует искать для жестов.