What's the purpose of NavSegment in IonTabs and IonTab?

Ionic Framework ionic-v3
1

Hi everyone,

I’m having some weird behaviours caused by the NavSegment of the ion-tabs component, and I was wondering what was that segment for.

The main page of my app has tabs at the bottom. I have a use case where I need to reload all the data, including the tabs, so I’m doing:

rootNavCtrl.setRoot('MainMenuPage')

Where “MainMenuPage” is the page that holds the tabs and rootNavCtrl is the root NavController of my app. When I do this, the page that is active when this command is executed is instantiated again without any NavParam, causing an exception in my code because it expects some params.

So imagine that my navigation stack is:

CoreMainMenuPage > SecondPage > ThirdPage

If I execute the line above while being in ThirdPage, when the new CoreMainMenuPage is loaded then the class ThirdPage is instantiated again without no NavParams.

I debugged this and the problem is in this line. The tabs of the new view retrieve a segment that points to the page that was active (in the example above, ThirdPage), so that page is created again.

So my question is, what’s the purpose of this segment? Is there any way to avoid using it?

Thank you!

2

How do you pass parameters between your pages?

Do you use:

@IonicPage({
  segment: 'venue/:id',
})

Do you use a unique ‘tabUrlPath’:

<ion-tabs #tabs selectedIndex="2" (ionChange)="onIonChanged($event)">
  <ion-tab [root]="tab0Root" tabUrlPath="activity-tab" tabIcon="fa-fal-list"></ion-tab>
  <ion-tab [root]="tab1Root" tabUrlPath="location-tab" tabIcon="fa-fal-map-marker"></ion-tab>
  <ion-tab [root]="tab2Root" tabUrlPath="search-tab" tabIcon="fa-fal-street-view"></ion-tab>
  <ion-tab [root]="tab3Root" tabUrlPath="person-tab" tabIcon="fa-fal-user"></ion-tab>
  <ion-tab [root]="tab4Root" tabUrlPath="notifications-tab" tabIcon="fa-fal-bell"></ion-tab>
</ion-tabs>
1 Like
3

Hi robinyo,

thanks for answering. Actually, I’m not specifying the parameters in the segment, I didn’t know I should do that. This is how I declare my page and receive the params:

@IonicPage({ segment: 'my-third-page' })
...
    constructor(navParams: NavParams) {
        this.courseId = navParams.get('courseId');
    }

And this is how I send that param:

    this.navCtrl.push('MyThirdPage', {
        courseId: this.courseId
    });

Regarding the tabs, I’m not using tabUrlPath either:

<ion-tabs>
    <ion-tab [root]="firstTabRoot" tabTitle="First Page" tabIcon="ion-search"></ion-tab>
    <ion-tab [root]="secondTabRoot" tabTitle="Second Page" tabIcon="ion-person"></ion-tab>
</ion-tabs>

All my pages are lazy loaded.

4

See:

5

Thanks robinyo,

I didn’t know that the segments were used for deep linking, now I understand why they’re needed in the tabs.

What I finally did to prevent my page to be reloaded is to clear the URL path before reloading the tabs page:

this.location.replaceState('');
rootNavCtrl.setRoot('MainMenuPage')

Thank you again!