Как настроить боковое меню с вкладками в Ionic 2?

Question

Как я могу настроитьside menu с tabs в ionic 2, я разработал приложение в ionic 2, но после того, как set Root на странице в tabs меню не загружен правильно любое предположение о том, что?

Answer 1

У меня есть sidemenu с просмотром вкладок на моем приложении, поэтому я думаю, что это поможет вам.

Это мой шаблон меню:

<ion-menu [content]="content" class="sidemenu"> 
    <ion-header> 
    <ion-toolbar color="indigo500"> 
     <ion-title>Menu</ion-title> 
    </ion-toolbar> 
    </ion-header> 

    <ion-content> 
    <ion-list> 
     <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)" 
      class="item item-icon-left"> 
     <ion-icon name="{{p.icon}}"></ion-icon> 
     {{p.title}} 
     </button> 
    </ion-list> 
    </ion-content> 
    <ion-footer> 
    <button menuClose ion-item (click)="logout()"> 
     Logout 
    </button> 
    </ion-footer> 
</ion-menu> 

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

И мои вкладки просмотра:

<ion-header class="class1"> 
    <ion-navbar color="indigo500"> 
    <button ion-button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title>My App</ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content class="class2"> 
    <ion-tabs tabsPlacement="top"> 
    <ion-tab tabTitle="Snacks" [root]="tab1"></ion-tab> 
    <ion-tab tabTitle="Drinks" [root]="tab2"></ion-tab> 
    <ion-tab tabTitle="Frozen" [root]="tab3"></ion-tab> 
    </ion-tabs> 
</ion-content> 

И мои menu.ts:

@Component({ 
    templateUrl: 'menu.html' 
}) 
export class Menu { 
    @ViewChild(Nav) nav: Nav; 

    rootPage: any = tabscomponent; 

    pages: Array<{title: string, component: any, icon: string}>; 

    constructor(public platform: Platform) { 

    // used for an example of ngFor and navigation 
    this.pages = [ 
     { title: 'List', component: component1, icon: 'list' }, 
     { title: 'Settings', component: component2, icon: 'settings' } 
    ]; 

    } 

    openPage(page) { 
    // Reset the content nav to have just this page 
    // we wouldn't want the back button to show in this scenario 
    this.nav.setRoot(page.component); 
    } 
} 

И вы только должны перенаправить в меню Компонент, надеюсь, это поможет вам.