Go back to the root page

Ionic Framework ionic-v3
1

Hi ,
i’m using NavController and i need to go back to the root page of my navigation.
Example:

I have TabsPage -> Page1->Page2.
now in Page2 i need to create a button, that brings me back to the root page (TabsPage) .
but when i type “this.nav.pop()” it’s redirect back to Page1.
Please any suggestions?

2

Try this:

this.nav.setRoot(TabsPage);

1 Like
3

Nothing happens :disappointed_relieved:

4

Try this.nav.popToRoot() or this.nav.rootNav.setRoot(Tabs)

7 Likes
5

nav.popToRoot() works like a charm :slight_smile: thanks !

6 Likes
7

this.nav.setRoot(TabsPage);
This line will not work lonely because you actually change the root, but the pages that still in the quoue stack is still there, and avoid you to see your root page changes

so you need to add the line:
this.nav.popToRoot()
tell the nav to drop all the views pushed to the quoue all the way to the root.

so in shortly:

this.nav.setRoot(TabsPage);
this.nav.popToRoot();

9 Likes
8

Thanks you so muchhhhhhhhh!
You save my life.:smile:

9

I tried this exact code in my home.ts and it works, but the tab icons are still on the bottom of the screen when it goes to login page.

logout() {
  this.oauthService.logOut();
  this.nav.setRoot(LoginPage);
  this.nav.popToRoot();
}

Any idea how to change that behavior? Note that in my app.component.ts, I’m setting the root page on launch.

constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen,
            oauthService: OAuthService) {
  if (oauthService.hasValidIdToken()) {
    this.rootPage = TabsPage;
  } else {
    this.rootPage = LoginPage;
  }
  
  platform.ready().then(() => {
    // Okay, so the platform is ready and our plugins are available.
    // Here you can do any higher level native things you might need.
    statusBar.styleDefault();
    splashScreen.hide();
  });
}
10

I prefer designing things so that the state of authentication is exposed as a ReplaySubject with a depth of 1. That way logout() does not have to ever interact with the navigation system at all. It just calls next(false) on the authentication state subject and lets the code you already have in the app component handle everything:

authService.notifier.subscribe((authed) => {
  if (authed) {
    this.rootPage = TabsPage;
  } else {
    this.rootPage = LoginPage;
  }
});
4 Likes
11

Works thanks …

12

@mraible
Facing same problem !
Have you solved this???

13

Yes, I was able to solve it using the following code:

constructor(public app: App, public oauthService: OAuthService) {
}

logout() {
  this.oauthService.logOut(true);
  this.app.getRootNavs()[0].setRoot(LoginPage);
}
5 Likes
14

Can you please provide the answer for this…I have raised the same question in this How to skip TabsComponent Page, when user clicks Back button(<) in Other page.

15

this.navCtrl.setRoot(HomePage)
this.navCtrl.popToRoot();

16

wooo work for me this.nav.popToRoot()

17

He asked how to go back to the root, not how to set another root.

The this.nav.popToRoot() is the right answer.