Why are tabs lost after click side menu? - tabs

Question

I start my project with tabs template and then I add side menu into it. Both tabs and side menu work, but if i click on menu item, page lost tabs view.
app.components.ts
#Component({
templateUrl: 'app.html'
})
export class MyApp {
#ViewChild(Nav) nav: Nav;
rootPage = TabsPage;
pages: Array<{title: string, component: any}>;
constructor(public platform: Platform) {
this.initializeApp();
// used for an example of ngFor and navigation
this.pages = [
{ title: 'Home', component: HomePage },
{ title: 'About', component: AboutPage },
{ title: 'Contact', component: ContactPage }
];
}
initializeApp() {
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
Splashscreen.hide();
});
}
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);
}
app.html
<ion-menu [content]="content" push persistent=true>
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="outer-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>

Answer 1

The issue is you are setting the component selected from the menu as root.
this.nav.setRoot(page.component);
This replaces the existing TabsPage with the selected page as root rather than change the selected tab of the TabsPage.
A solution is to send the page object from openPage() function to TabsPage using Events API or a service with Observable/Subject.
openPage(page) {
this.events.publish('menu selected',page);
}
In your TabsPage,
ngOnInit(){
this.events.subscribe('menu selected',this.openPage.bind(this))
}
openPage(page){
this.tabs.select(page.index);//set an additional property with index same as tab order.
}