Save QueryParams while switching in between tabs

Hi All,

I am trying to save the Query Params on my tabs.html where i have 3 tabs, each tabs opens a different Component but need the queryParams named load_specification_id but as i switch between the tabs the variable holding load_specification_id is getting undefined.

My Structure is something like -
Home.ts -> (passes params via NavController to tabs component )-> Tabs.ts (gets it via Activated Route) -> this param is used by 2 of the tabs.

But as is switch between tabs for 2 times it works fine but third time it becomes undefined.

Home.ts

       this.navCtrl.navigateForward(["tabs"], {
            queryParams: 
                load_specificaion_id: loadspecid,
            },
        });

Tabs.ts

export class TabsPage implements OnInit {
    load_specificaion_id: any;

    constructor(
        public navParams: ActivatedRoute,
        public events: Events,
        public storage: Storage) {
        this.navParams.queryParams.subscribe((params) => {
            this.load_specificaion_id = params["load_specificaion_id"];
        });
    }

Tabs.html

<ion-tabs>
    <ion-tab-bar tab="loadDetails">
    </ion-tab-bar>

    <ion-tab-bar tab="truckProps">
    </ion-tab-bar>

    <ion-tab-bar tab="specialLoadProps">
    </ion-tab-bar>

    <ion-tab-bar tab="TandC">
    </ion-tab-bar>
</ion-tabs>

<ion-tabs>
    <ion-tab-bar slot="bottom" class="customTabs">
        <ion-tab-button class="tabButton" tab="loadDetails/{{load_specificaion_id}}" (click)="loadClick()">
            <ion-icon name="calendar"></ion-icon>
            <ion-label class="ion-text-wrap wrapLabel">Load Details</ion-label>
        </ion-tab-button>

        <ion-tab-button class="tabButton" tab="truckProps">
            <ion-icon name="car"></ion-icon>
            <ion-label class="ion-text-wrap wrapLabel">Truck Property</ion-label>
        </ion-tab-button>

        <ion-tab-button class="tabButton" tab="specialLoadProps">
            <ion-icon name="person-circle"></ion-icon>
            <ion-label class="ion-text-wrap wrapLabel">Special Property</ion-label>
        </ion-tab-button>

        <ion-tab-button class="tabButton" tab="TandC">
            <ion-icon name="map"></ion-icon>
            <ion-label class="ion-text-wrap wrapLabel">T & C</ion-label>
        </ion-tab-button>
    </ion-tab-bar>
</ion-tabs>

Tabs-routing.modules.ts

const routes: Routes = [
    {
        path: '',
        component: TabsPage,
        children: [
            {
                path: 'truckProps',
                loadChildren: () => import('../../../showtruckpreference/showtruckpreference.module').then(m => m.ShowtruckpreferencePageModule)
            },
            {
                path: 'specialLoadProps',
                loadChildren: () => import('../../../loadspecialproperties/loadspecialproperties.module').then(m => m.LoadspecialpropertiesPageModule)
            },
            {
                path: 'TandC',
                loadChildren: () => import('../../../termsandconditions/termsandconditions.module').then(m => m.TermsandconditionsPageModule)
            },
            {
                path: '',
                loadChildren: () => import('../../../loadsearchdetail/loadsearchdetail.module').then(m => m.LoadsearchdetailPageModule)
            },
            {
                path: 'loadDetails/:id',
                loadChildren: () => import('../../../loadsearchdetail/loadsearchdetail.module').then(m => m.LoadsearchdetailPageModule)
            }
        ]
    }
];

Can someone point me what am i doing wrong ? why is the this.load_specificaion_id is getting undefined ?

My Ionic Info

Ionic CLI                     : 5.4.16
   Ionic Framework               : @ionic/angular 5.2.2
   @angular-devkit/build-angular : 0.901.9
   @angular-devkit/schematics    : 9.1.9
   @angular/cli                  : 9.1.9
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 2.2.0
   @capacitor/core : 2.2.0

Utility:

   cordova-res : 0.15.1
   native-run  : not installed

System:

   NodeJS : v10.18.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.13.4
   OS     : Windows 10

Thanks,
Rahul

The pattern I generally use when an app has a concept of “selected” or “target” business object is to store it in a service provider that is injected by everybody who cares about it and exposed as an Observable so that they all get timely updates when it changes.

I tried this way, but seems it update undefined in that object and hence gets published.

Do you know why does the variable in Tabs.ts gets overwritten??

Also is there any event function which gets called on every tab clicked ?

Sorry, but I have absolutely no clue what this sentence means.

Assuming by “the variable” you mean load_specificaion_id, all I have to go on is the code you have posted, so assuming that’s the only place it is assigned, then it would stand to reason that the answer is “because the object referenced by this.navParams.queryParams emitted a value”. You’re leaking that subscription, by the way.

I don’t know of one, and I believe pretty strongly that you shouldn’t care. In fact, I’m concerned about the events parameter in your constructor. That used to be part of Ionic Framework, and it facilitated a lot of spaghetti code.