Go to root page from a tab

Question

I would like to know how to go back to the rootPage defined in the appComponent when using tabs. The setRoot method is not working as I expected. When it is used in a Tab page the navigation stack is not cleared. On the 'home page', the back button is visible instead of the navigation toggle and the title of the tab is shown.

By default, pages are cached and left in the DOM if they are navigated away from but still in the navigation stack (the exiting page on a push() for example). They are destroyed when removed from the navigation stack (on pop() or setRoot()).

The statement above gives me the expectation that when I use setRoot pages are cleared from the cache. This seems to be true when it is used in a normal page but not in a tab.

In the class of the tab page, there is a function that sets the root page to home when the button is clicked.

goToHome() {
 this.navCtrl.setRoot(HomePage);
}

How can I make sure that when we are returned to the homePage there is no back button and the title of the home is used that is available in the HTML template of the component.

Answer 1

Just like you can see in the docs

Notice that each <ion-tab> binds to a [root] property, just like in the Navigation section above. That is because each <ion-tab> is really just a navigation controller. This means that each tab has its own history stack, and NavController instances injected into children @Components of each tab will be unique to each tab

So when setting a page as root, you're using the navigation stack from that tab, and not the one of the entire app. That's why you need to get the main navigation stack by doing:

constructor(private app: App,...) {...}

And then

yourMethod(): void {
    this.app.getRootNav().setRoot(YourPage);
}

Answer 2

just try this it work great for me

this.childNavCtrl.setRoot(HomePage);