I've created a tabs based app with the command.
ionic start myApp tabs
The idea is to add different side menus for each tab pages, trying to do a master detail navigation, using the side menu as master elements list and the tab pages to show detailed content.
The app.component.html
file looks like this:
<ion-app>
<ion-router-outlet></ion-router-outlet>
</ion-app>
tab1.page.html
like code:
<ion-menu contentId="aside1" side="start">
<ion-content>
<ion-list>
<ion-item class="side-menu-item" *ngFor="let item of strings">{{item.title}}</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="aside1" main></ion-router-outlet>
tab2.page.html
code:
<ion-menu contentId="aside2" side="start">
<ion-content>
<ion-list>
<ion-item class="side-menu-item" *ngFor="let item of strings">{{item.title}}</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="aside2" main></ion-router-outlet>
Both menus aside1
and aside2
works when I swipe and show the individual strings array elements at the first look of tabs. The problem is when I go back to previous tab, instead of show again aside1 side menu
, this stop working and what the swipe
gesture really does is show the side menu of the other tab.
I don't know if I need a particular code in tab1.page.ts
and tab2.page.ts
to make this work.
The problem was that I haven't specify the menuId
in each side menu.
I do not delete the question in case someone finds it interesting to create different menus for each page
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.