Ionic2: Как использовать другое ионное меню в каждом представлении для детей

Question

Я пытаюсь изучить использование боковых меню Ionic2 и хочу посмотреть, могу ли я иметь отдельное боковое меню в каждом дочернем представлении.

Я установил один из Getting Started приложений, который имеет ионную-меню в главном приложении, то есть в файле начальной загрузки app.html мы имеем

<ion-menu [content]="content"> 

<ion-toolbar> 
    <ion-title>Pages</ion-title> 
</ion-toolbar> 

<ion-content> 
    <ion-list> 
    <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)"> 
     {{p.title}} 
    </button> 
    </ion-list> 
    </ion-content> 

</ion-menu> 

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav> 

Я потом добавил свою собственную страницу, и в начальная корневая страница getting-started.ts из примера приложения я добавить следующее, чтобы перейти к моей новой странице ..

public goToSideMenuPage(): void{  
    this._navController.push(SideMenuPage); 

Я также добавить кнопку для вызова выше обработчика.

В SideMenuPage я хотел бы, чтобы у него было свое совершенно другое боковое меню. Я попробовал следующее ...

<ion-menu [content]="thecontent"> 
<ion-toolbar> 
    <ion-title>Menu title</ion-title> 
</ion-toolbar> 

<ion-content> 
<ion-list> 
    <button>button1</button> 
    <button>button2</button> 
</ion-list> 
</ion-content> 
</ion-menu> 

<ion-content #thecontent> 
    <div>Main contents text</div> 
</ion-content> 

Однако, когда я Гото моя страница, все, что я вижу в левом верхнем углу Main contents text. Я не вижу значок гамбургер меню, и если я перетащить вправо, я вижу, что приложение главное меню, как установить в app.html, а не мое собственное меню «местный» с содержанием

<button>button1</button> 
<button>button2</button> 

В DOCO найдены here, демонстрация действительно показывает, что боковое меню меняет местами во время выполнения, но я не вижу его в любом месте. Это близко к тому, что я хочу сделать (хотя я хочу, чтобы он менялся, когда в зависимости от того, на какую дочернюю страницу я перехожу), так что похоже, что это возможно, но я просто не совсем понимаю, как я должен делайте это.

Кто-нибудь знает, возможно ли это, и если да, то как это сделать?

Answer 1

Информация, которую вы ищете, находится в разделе MenuController от Ionic2 docs. Это может быть сделано путем добавления меню в 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> 
</ion-menu> 

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

И затем, на каждой странице мы можем решить, какое меню должно быть активировано, как это:

constructor(private menu: MenuController, private nav: NavController) { } 

    ionViewDidEnter() { 
    // Use the id to enable/disable the menus 
    this.menu.enable(true, 'menu1'); 
    this.menu.enable(false, 'menu2'); 
    } 

Также обратите внимание, что я показываю вторую страницу, используя this.nav.setRoot(Page1); вместо того, чтобы использовать что-то вроде this.nav.push(Page1);.

---

EDIT: Если вы хотите, оба меню активного в то же время, пожалуйста, посмотри на this answer.

---

EDIT 2: Так же, как @peterc говорят в комментариях:

I found this also worked if I had my side menu in my page sidemenu-page.html and set this.menu.enable(true, 'menu1'); in it's component (so there is the option to have the side menu with the markup of the page that will switch to it).

добавить, что к ответу, так как вид, в котором он будет использоваться, кажется, лучшее место, чтобы поставить меню вместо app.html.

Answer 2

Просто добавить это как часть информации, заданной @sebaferreras ради @ user623396

Чтобы иметь боковое меню в реальной точки зрения, у меня было следующее ...

<ion-menu [content]="thecontent" id='menu1'> 
     <ion-toolbar> 
     <ion-title>Title</ion-title> 
     </ion-toolbar> 

     <ion-content> 
     <ion-list> 
      <button>button1</button> 
      <button>button2</button>  
     </ion-list> 
     </ion-content> 
    </ion-menu> 

    <ion-navbar *navbar> 
     <button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
     </button> 
     <ion-title>Getting Started</ion-title> 
    </ion-navbar> 

    <ion-content #thecontent> 
     <div>Some text</div> 
    </ion-content> 

И то в файле компонент

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

    // Use the pipe TranslatePipe to use in the markup 
    @Component({ 
     templateUrl: 'build/pages/sidemenu-page/sidemenu-page.html' 
    }) 
    export class SideMenuPage { 
     public rootPage = SideMenuPage; 

     public myVal: string; 

     constructor(private menu: MenuController, private nav: NavController, private tranlate: TranslateService){ 
     } 

     ionViewDidEnter() { 
     this.menu.enable(true, 'menu1'); 
     } 
    } 

Надеется, это по-прежнему верно для последней версии ионического (это было некоторое время, так как я смотрел на этом примере)