Ionic 2 tabs and sidebar - How do I maintain tabs with setRoot? - tabs

Question

I have an Ionic 2 app that uses both a sidebar and tabs.
I have managed to create a link in the sidebar that sends the user back to the root page, but this kills the tabs. I would like the tabs to be persistent.
Here is what I have:
app.html
`<ion-menu [content]="content">
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<ion-item (click)="openPage(page)" *ngFor="let page of pages">
<span>{{page.title}}</span>
</ion-item>
</ion-list>
</ion-content>
<ion-nav id="nav" [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>
Then in my app.ts I have this function:
openPage(page) {
this.menu.close();
this.nav.setRoot(page.component);
}
So this does actually work, but I lose my tabs. Is there a better way to do this?

Answer 1

this.nav.setRoot(TabsPage);
TabsPage is the class name of your tabs page's component.

Answer 2

You could reference the ionic-conference-app. It works for me.
openPage(page){
this.menu.close();
let params = {};
if (page.index) {
params = { tabIndex: page.index };
}
if (this.nav.getActiveChildNavs().length && page.index != undefined) {
this.nav.getActiveChildNavs()[0].select(page.index);
} else {
this.nav.setRoot(page.name, params).catch((err: any) => {
console.log(`Didn't set nav root: ${err}`);
});
}
}