Tabs disappears ionic 3 after push

Question

My Tabs disappears after using this.navCtrl.push(NamePage);

I don't understand, I need use @ViewChild or another function? I have set tabsHideOnSubPages on false in app.module.ts

Example : https://github.com/Nicolas-PL/TestMenu

Files is : src/pages/tabs/tabs.ts and src/pages/test/test.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';
import { TestPage } from '../test/test';
import { ModalController } from 'ionic-angular';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  tab1Root = HomePage;
  tab2Root = AboutPage;
  tab3Root = TestPage;

  constructor(public navCtrl: NavController,public modalCtrl: ModalController) {
  }

  openModal() {
    let myModal = this.modalCtrl.create(TestPage);
    myModal.present();

  }
}

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab (ionSelect)="openModal()" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>

Test.ts (tabs disappears)

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { HomePage } from '../home/home';
import { App, ViewController } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-test',
  templateUrl: 'test.html',
})
export class TestPage {

  constructor(public viewCtrl: ViewController, public navCtrl: NavController, public navParams: NavParams) {}
  ionViewDidLoad() {}

  openMenu() {
  this.navCtrl.push(HomePage);
}

}

I have try this.navCtrl.root(HomePage); but don't works..

Thank you in advance !

Answer 1

If you need to navigate from an overlay component (popover, modal, alert, etc) then you must do it like below.

test.ts

export class TestPage {
    constructor(
      public viewCtrl: ViewController
      public appCtrl: App
    ) {}

    openMenu() {
      this.viewCtrl.dismiss();
      this.appCtrl.getRootNav().setRoot(HomePage);
    }
  }

You can read more about it here(see under the title Navigating from an Overlay Component).