Problem with tabbed views

Hi there!

Let’s introduce you the situation:
I have two different pages and each one has tabs like described in the docs:

Page A

<ion-tabs #tabs color="primary" tabsPlacement="top">
  <ion-tab [root]="transactions" tabTitle="Transactions"></ion-tab>
  <ion-tab [root]="invoices" tabTitle="Invoices"></ion-tab>
  <ion-tab [root]="payment" tabTitle="Payment methods"></ion-tab>
</ion-tabs>

Page B

<ion-tabs #tabs color="primary" tabsPlacement="top">
  <ion-tab [root]="agenda" tabTitle="Agenda"></ion-tab>
  <ion-tab [root]="requests" tabTitle="Requests"></ion-tab>
  <ion-tab [root]="history" tabTitle="History"></ion-tab>
</ion-tabs>

When displaying one of those tabs, it is represented in the URL bar as:

in "Page A":
localhost:8080/#/page-a/transactions/page-a-transactions
[...]
or in "Page B":
localhost:8080/#/page-b/agenda/page-b-agenda
[...]

The problem is:
When changing from Page A to Page B or viceversa, the tabs are changed to each page’s tabs, but the tab content remains the same as the previous page. The tab content as well as the last part of the URL displayed is not changed until you click the tab you want to view again.

For example, I am at:

localhost:8080/#/page-a/transactions/page-a-transactions

Then I click on a button which calls navCtrl.setRoot('page-b'), so I expect it to go to page-b and displays the content from page-b-agenda, which is the first tab from page-b. Instead of it, I get the tabs changed to page-b's tabs and the content from page-a-transactions, and the URL look like this:

localhost:8080/#/page-b/agenda/page-a-transactions

Could you identify what am I doing wrong?
Thanks in advance!

Any suggestions? I’ve tried everything :cold_sweat: