In my application, I have two page and on each page, I need to implement ion-tabs. My problem is when I switch my page the tab routing is not working properly. It is displaying the last tab selected of my older page. Please have look:
App Component code:
this.pages = [
{ title: 'Ewt', component: 'EwtTabsPage' },
{ title: 'FLBP', component: 'FlbpTabsPage' },
]
this.nav.setRoot(page.component);
Page 1 tabs html code:
<ion-tabs #flbpTabs [selectedIndex]="selectedTab" tabsPlacement="top" (ionChange)="onTabsChange()">
<!-- Indicates with tabsPage should handle each tab here -->
<ion-tab [root]="tab1Root" tabTitle="Summary"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="MTD"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Monthly"></ion-tab>
</ion-tabs>
Page 1 ts code
@ViewChild('flbpTabs') tabRef: any;
And same code with another page:
First time URL:
http://localhost:8100/#/ewt-tabs/summary/ewt-summary
While switch to another page:
http://localhost:8100/#/flbp-tabs/summary/ewt-summary
But it should be
http://localhost:8100/#/flbp-tabs/summary/flbp-summary
(Working properly when I click on tabs)
``
Please help and let me know if need more clarification.