Change tab root page (refresh tab as different page)

Ionic Framework ionic-v3
1

is it possible, now that pages / tabs are lazy loaded to reload a tab as a different target page?

I have a profile tab and i would like to set the root to ‘profilePage’ if the user is logged in or ‘notLoggedInPage’ if they aren’t.

I can do this, in the TabsPage logic by changing the page name, but when i change it and visit the tab after logging in it doesn’t update to the new tab location

2

Please post code. This should be possible regardless of lazy loading.

3

Lazy loading has no bearing on this.

rootPage: any = 'AnyPageIWant';

4

I have tabs setup like so

_homeTab: any = 'HomePage';
  _searchTab: any = 'SearchPage';
  _eventsTab: any = 'EventsPage';
  _myFeedTab: any = 'MyFeedPage';
  _profileTab: any = 'ProfilePage';

<ion-tabs selectedIndex="0">
  <ion-tab [root]="_homeTab" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="_searchTab" tabTitle="Search" tabIcon="ios-search"></ion-tab>
  <ion-tab [root]="_eventsTab" [rootParams]="" tabTitle="Events" tabIcon="md-calendar"></ion-tab>
  <ion-tab [root]="_myFeedTab" tabTitle="My Feed" tabIcon="md-heart"></ion-tab>
  <ion-tab [root]="_profileTab" tabTitle="MyTickX" tabIcon="ios-person"></ion-tab>
</ion-tabs>

But if the user is not logged in I want to set these vars like so

  _myFeedTab: any = 'NotLoggedIn';
  _profileTab: any = 'NotLoggedIn';

That works I can conditionally set them, but when i visit my feed tab and then login from the ‘notLoggedIn’ page I then change the vars back to

  _myFeedTab: any = 'MyFeedPage';
  _profileTab: any = 'ProfilePage';

visiting the _profileTab works as ‘ProfilePage’ it hadn’t loaded as ‘notLoggedIn’ but the my feed tab had already loaded as ‘notLoggedIn’ so does not reload to the new variable setting of ‘MyFeedPage’

5

I’m having the same problem. I don’t know how to do this. Did you resolve?

1 Like
6

Same problem here too. Anyone figure this out?

1 Like
7

Here is a plunker to reproduce the problem.
https://next.plnkr.co/edit/euzerzoNQrNxGKVm

Basically we want to change the content/page associated with a given tab and switch to it (in case it was not already) displayed.
Currently setting a tab to a page dynamically seems to be ignored and requires a click on the modified tab to render its content.

In the simplified demo provided in the above link, a couple of buttons are provided to change the desired pages associated with the second tab. However, the correct page content is NOT displayed until one clicks the actual tab.

Thank you for fixing that plunker to work correctly or posting the necessary code here.

8

Here is reproduction code on StackBlitz

https://stackblitz.com/edit/ionic-yjlfhv?file=app/TabsPage.ts, feel free to adjust as needed.

The expected behavior is that the OptionPage broadcasts a Changed event then the TabsPage reacts and sets a different rootPage for the “View” tab. This should get reflected when the tab is selected programmatically or by the user.

Even if the TabsPage.ts code does not programmatically select the View tab, the View tab is still requiring an explicit user click to update.

How can we fix this?
Thank you.