Tabs Instances Stacking

Ionic Framework ionic-v3
1

I have an app that has two pages and a tab set which has 4 pages. Here’s the break down:

  1. Loading/Prelogin Page
  2. Login Page
  3. Tabs
    A. Tab 1
    B. Tab 2
    C. Tab 3
    D. Tab 4

User enters the loading/prelogin screen. They then either login or are already logged in. From there they are sent to the tabs page.

User uses the apps within the tab context. Works fine.

User wants to log out. They they hit the logout button in tab4.

Redirected back to Login screen.

User logs in again. Now there are 2 sets of tabs. If I rinse and repeat. I’ll gain another tab… over and over.

What I’m doing is setting this.nav.setRoot(LoginPage). However, I’m already in the tabs so it keeps the previous tabs and when the new session starts I call this.nav.setRoot(TabsPage). Thus resulting in the stacking.

How can I reset the nav so I can completely get rid of them when I go back to the login screen?

2

would you be able to recreate a smaller example of this in a codepen, a bit hard to figure out whats up without seeing some code :smile:

3

Hello. I also have this problem. I really don’t know how to create ionic2 application in codepen, sorry. But I have simply one tabs page that is the root in my @App. And in that tabs page there are two other pages(registration and login). So - the thing is, when I try to redirect a user from the registration page to the login the additional footer appeared every time I’m doing it. How I’m redirecting is just simply setting the root page of the app with this envocation:
this._nav.setRoot(TabsPage);
I’ve also tried to do the pop from the navController, but it doesn’t work.
Pointing to some resources, that could put some light on how to work with the tabs in this sense would be much appreciated. Thank you)

4

Same problem here :confused:

5

this._nav.rootNav.setRoot(TabsPage);

Should do the trick:-)

2 Likes
6

Yes @infoproducts is correct. That worked for me.