Ionic2 - tabs disappear whenever I push a new page/component with navCtrl

Question

According to my understanding of the Ionic docs and questions like: How to keep tab when pushing a new page?

I've correctly done what's necessary to prevent my tabs bar from being hidden. To be clear, the tab bar correctly shows when navigation starts on any tab page and you go to any other tab page in the stack. Whenever you use a "push" method from a nav controller or modal controller etc. the tab bar disappears. Where am I going wrong?

In the code below, the person lands on the walkthrough when first downloading the app. There is a button that then takes them to the directory where a tabs bar should also be.

In the case when the user has already seen the walkthrough, the root page is set to the home page, where the tab bar exists. If the user navigates to the directory page from the home page using the tab bar the tab bar stays in place, correctly at the bottom of the page.

From my understanding adding tabsHideOnSubPages:false to the app.module.ts will prevent this behavior but it does 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. Thats not the problem here. When you this.navCtrl.push(Directory); it comes on top of WalkThrough component. Directory is not aware of the tabs.

Only the Tabs page and its children will be aware of tabs. Here you have not pushed Tabs into the the NavController. So the nav array looks like this [WalkThrough,Directory] . Instead you need [WalkThrough, Tabs(default: Directory)].

You need push Tabs page and set <ion-tabs selectedIndex="1">. You can use navParams to pass which index needs to be selected. Here is a mock.

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

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

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

I havent tested it. Hope it works for you.