Load Root Page when tab selected

Ionic Framework ionic-v3
1

Hello,

We have the following, pretty simple, case:
We’ve the Page with list of article previews, let name it news page.
When pressing on some of the previews, the app loads another page, let name it article details page, by the NavController.push method.

The problem is that when User
go to article details page,
from that to another page(from tabs navbar),
and then press on the news page in tabs navbar, User is redirecting to last opened article details page.
But EXR for our app, its to load tab root page whenever the tab is selected.

As temporary solution we’ve added following method in TabsPage. Method calls on (ionSelect) event/output from ion-tab component:

  onTabTapped(id: string): void {
    const tabsInfo = this.navCtrl.getActiveChildNavs()[0].getSelected();
    const tabIndex = tabsInfo.index;
    tabsInfo.parent.select(tabIndex);
}

But with this method, there is blink with details page before loading tab root page.

May you please suggest a more proper way?

Thanks

2

As a workaround, on the details page, can be used the following:

ionViewWillLeave() {
    document.querySelector('ce-newsfeed').removeAttribute('hidden');
    document.querySelector('ce-newsfeed-details')['style'].zIndex = '99';
    document.querySelector('ce-newsfeed-details')['style'].visibility = 'hidden';
}
3

I need more information about the way you pushed the article details page :
-> go to article details page

  • is it a new page that you push above the news page??
  • how do you push it (give me the line of code that do that
4

Thanks for reply.

I push page by NavController.push method. So, yes, it is a new page that we push above the news page

goToDetails(): void {
 this.navController.push(DetailsPage, { details: this.details })
}
5

if news page is one of Tabs pages , you should use this method to push the article page above news page :

this.app.getRootNav().push(DetailsPage, { details: this.details });

using this.app.getRootNav() will get you the navController of the page Tabs
now when you push an Article page, it will be above News page and when clicking back button and it will bring you back to news page.

I hope this could help you and it answers your question.

6 
this.app.getRootNavs()[0].setRoot("HomePage");
7

Thanks for the reply,
but with this solution Tabs page will be not visible on DetailsPage.
And we want to have it there.

8

Thanks for the reply,
but if we’ll do it in this way, Go back button and Tabs page will be not visible on HomePage.

10

I didn’t read exactly what you what, I thought that was you Intention sorry then

11

@fullstackdb did you find a solution for this? I am facing the same problem