0

I have a page displaying two tabs using ion-tabs. Navigation to this page happens via a Navigate call that includes NavigationExtras with data that I need on the page.

let navigationExtras: NavigationExtras = {
  state: {
    item: goal
  }
};
this.navCtrl.navigateForward('/goalview',navigationExtras);

My page includes the routing to load the relevant module based on which tab was clicked and that works. The problem is that I dont know how to pass through the NavigationExtras data (ie state.item) to the components being called on the tab click?

ion-tabs just allows you to specify a tab attribute which drives the routing. But how can I include any relevant queryParams or NavigationExtras so that I can get the data that I need passed to the tab? Bottom line how do you pass data between tabs?

To be extra clear...a use case is My page is displaying a notification tab and a settings tab for a specific object that was passed in through NavigationExtras. If I click on Notifications I want to load up notification info for the very same object. Same goes for settings. But I can't see how to specify more than just a route with the tabs and not data itself? Is this not possible?

One final point...this is all happening because I am migrating from ionic3 to ionic5. In ionic3 this was simple by using [rootParams] as follows:

<ion-tab tabIcon="information-circle" [rootParams]="navParams" [root]="goalEdit" tabTitle="{{ 'TITLEINFO' | translate}}"></ion-tab>
<ion-tab tabIcon="notifications" [rootParams]="navParams" [root]="goalSettings" tabTitle="{{ 'TITLEREMINDER' | translate}}"></ion-tab>

Thanks

Gotts
  • 2,274
  • 3
  • 23
  • 32
  • Check this link https://stackoverflow.com/questions/65607106/pass-the-data-between-pages-in-ionic-5/65611575#65611575 – Ravi Ashara Jul 15 '21 at 06:16
  • Thanks but that doesnt help here. I know how to pass data between pages using the ActivatedRoute. The problem here is persisting data or at least params between tabs. Tabs automatically drive the routing and doesnt seem any way to inject a parameter or data. In Ionic3 I was using [rootParams]="navParams" – Gotts Jul 15 '21 at 06:44

0 Answers0