Ionic2 - tabs disappear whenever I click on a new page / component using navCtrl

Question

In accordance with my understanding of ionic documents and questions, such as: How to save a tab when a new page is clicked?

I did the right thing to prevent tabs from hiding. To be clear, the tab bar correctly shows when the navigation starts from any bookmark, and you go to any other tab on the stack. Whenever you use the push method from a navigation controller or modal controller, etc. The tab bar disappears. Where am I mistaken?

In the code below, a person starts a step-by-step guide the first time the application is downloaded. There is a button that then transfers them to the directory, which should also contain the tab bar.

In case the user has already looked through the walkthrough, the root page is installed on the home page where the tab bar exists. If the user goes to the catalog page from the home page using the tab bar, the tab bar remains in place, correctly at the bottom of the page.

From my understanding of adding tabsHideOnSubPages: false for app.module.ts will prevent this behavior, but it is not.

app.module.ts ...

imports: [ IonicModule.forRoot(MyApp, { tabsHideOnSubPages:false }) ] 

...

app.component.ts ...

 import { Tabs } from '../pages/tabs/tabs'; import { Walkthrough } from '../pages/walkthrough/walkthrough'; @Component({ templateUrl: 'app.html' }) export class MyApp { rootPage: any = Tabs; launchObject:any; constructor(private platform: Platform){ platform.ready().then(() => { if(justDownloadedApp){ this.rootPage = Walkthrough; } }) } } 

...

app.component.html

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

tabs.ts

 import { Component } from '@angular/core'; import { Home } from '../home/home'; import { Directory } from '../directory/directory'; @Component({ templateUrl: 'tabs.html' }) export class Tabs { tab1Root: any = Home; tab2Root: any = Directory; constructor(){} } 

tabs.html

 <ion-tabs> <ion-tab [root]="tab1Root" tabsHideOnSubPages="false" tabTitle="Spotlight" tabIcon="flash"></ion-tab> <ion-tab [root]="tab2Root" tabsHideOnSubPages="false" tabTitle="Stores" tabIcon="cart"></ion-tab> </ion-tabs> 

walkthrough.ts

 import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import { Directory } from '../directory/directory'; @Component({ selector: 'walkthrough', templateUrl: 'walkthrough.html' }) export class Walkthrough { constructor(public navCtrl: NavController){} toDirectory(): any{ this.navCtrl.push(Directory); } } 

walkthrough.html

 <ion-header class="opaque"></ion-header> <ion-content class="walkthroughBackground"> <ion-col> <ion-row> <button class="clear-button-two" (click)="toDirectory()">Directory</button> </ion-row> <ion-col> </ion-content> 

Answer 1

This is the expected behavior. tabsHideOnSubPages:false is the default behavior. It's not a problem. When you this.navCtrl.push(Directory); It comes on top of the WalkThrough component. Directory does not know about tabs.

Only Tabs pages and its children will know about tabs. Here you have not pressed Tabs in the NavController . So, the nav array looks like this: [WalkThrough,Directory] . Instead, you need [WalkThrough, Tabs(default: Directory)] .

You need to click the Tabs tab and set <ion-tabs selectedIndex="1"> . You can use navParams to pass which index to select. Here is the layout.

walkthrough.ts -> this.navCtrl.push(Tabs,{index: "1"});

tabs.ts -> index = navParams.get('index')

tabs.html → <ion-tabs selectedIndex= {{index}} >

I have not tested it. Hope this works for you.