Ionic tab navigation not working properly while switching the page

511 Views Asked by At

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.

0

There are 0 best solutions below