Tab page lost back navigation

Before my tabs page, I have few other regular pages and the “< Back” is always present.

When reaching my tabs page, I am losing the “< Back” in my header. Why? For sure, I am missing something, but don’t know what.

I thought I could find my answer in the conference demo, but once logged in, there is no “< Back”. :frowning:

Anyone has idea?

Thanks

this.nav.setRoot(TabsPage);

This will redefine the current navigation,If you have, please comment out the code line and run serve again

1 Like

@Wall-E, I am not too sure where to add that line. Here the code:

In my page1.ts file, I have a function that calls the tab page (tabsPage.ts)

itemSelected (event, item) {
  this.nav.push(TabsPage, {
      itemInfo: item
  });
}

In tabsPage.ts, the constructor takes care to give all the roots for the tabs.

So, the line that you asked me to replace with would be the one in my page1.ts? If so, it did not work :frowning: It goes to an infinite loop

loadPage TabsPage: loadIntoLocation

Any hint?

Thanks

Anyone has other ideas to get the “< Back” back?

Hi @Wall-E,

You mentioned to me to use this.nav.setRoot(TabsPage), but still not sure where I should add that line.

Don’t forget, before my “TabsPage”, I have other pages and I want to be able to go back to the previous page (the one before going to the tab one).

Page 1 (page1.ts)–> Page 2 (page2.ts) --> go to TabsPage (TabsPage.ts) --> Tab 1 (tab1.ts)

I saw there is this.nav.pop and this.nav.popTo. So what I tried is from tab1.ts, I added a back button and called this.nav.pop() and this.nav.popTo(page2.ts). None of them gave me the previous page. I could understand that the first “pop” did not work, but don’t know why the “popTo” did not work.

Thanks in advance

Here my temporary solution. If someone has a better one, please share with me.

I put my <ion-tabs> within a <ion-content> and add a <ion-navbar> to that same html. The only “issue” that I see is it gives an extra space below the <ion-navbar>. It creates a <ion-navbar-section>. Maybe there is a way to remove it, but don’t know yet

UPDATE: With the help of another post, I added the below to fix the issue :smile:

ion-navbar-section {
  display: none;
}

I think when you use setRoot to change to a new page it redefines the navigation stack, so this new page will become the new root and there won’t be anything to go back to (no back button). When you use push it will add to the stack and the back button will be present. Just double check you are not changing to the tabs page with setRoot.

Thanks for the info, it confirms my thought.

I think the solution that I used make sense for my app and I will keep it with the help of the scss (see above)

Hi icarus_31 :slight_smile: I have had the same problem. I finally solved it including at the beginin of the tab page the following:
<ion-header> <ion-navbar> <ion-title>You can also add a title here</ion-title> </ion-navbar> </ion-header>

I don’t need to add <ion-content> section and I don’t get any extra space. Probably I am late but anyway here is my answer :).

Regards.

Adding an <ion-header> to the tabs page is an interesting workaround, but it could be potentially hazardous as this new header overlays any sub-tab-page header. Beware!