Ionic 2 tab issue

Question

I created a page with 3 tabs using ionic 2.Inside one page I created one button and on click of that button I navigate to a new child page by executing the push command but whenever I am clicking the tab containing the child page I am not able to see the root page instead I see the new child page. I want to see the root page on revisit of the tab page.

Below is my code.. here you can check in about.html i have placed one button to navigate to a child page.Navigation is happening but once I navigate then I am not able to see the about tab page without clicking on back button

 tabs.html
    <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 [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
    </ion-tabs>

    tabs.ts
    import { Component } from '@angular/core';
    import { HomePage } from '../home/home';
    import { AboutPage } from '../about/about';
    import { ContactPage } from '../contact/contact';

    @Component({
      templateUrl: 'tabs.html'
    })
    export class TabsPage {
      // this tells the tabs component which Pages
      // should be each tab's root Page
      tab1Root: any = HomePage;
      tab2Root: any = AboutPage;
      tab3Root: any = ContactPage;

      constructor() {

      }
    }

    abuot.html
    <ion-header>
      <ion-navbar>
        <ion-title>
          About
        </ion-title>
      </ion-navbar>
    </ion-header>

    <ion-content padding>

    <button ion-button (click)="navigate()" ion-button color="secondary">GO to LIst</button>
    <!-- <button [navPush]="listPage" ion-button color="secondary">Go To About</button> -->
        <!-- <button ion-button color="secondary">Secondary</button> -->
    </ion-content>

    about.ts
    import { Component } from '@angular/core';
    import {ListPage} from '../list/list';

    import {ViewController, NavController} from 'ionic-angular';

    @Component({
      selector: 'page-about',
      templateUrl: 'about.html'
    })
    export class AboutPage {


      constructor(public navCtrl: NavController,public viewctr: ViewController) {
      }
      navigate(){
         this.navCtrl.push(ListPage);
      }

    }

Caleb Swank Caleb Swank · Accepted Answer · 2017-01-24T22:00:49

Just a stab in the dark since we cannot see any of your code (which should be an addition to any question on here). You could try using .setRoot() to get to the root page you're wanting.

import { NavController } from 'ionic-angular';
import { NameOfPage } from '../NameOfPage';

pageYouWant: any = NameOfPage;

constructor(public navctrl: NavController){}

onClickFunction(){
    this.navCtrl.setRoot(pageYouWant)
}

Ionic 2 tab issue

1 Answers