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

1 post - 1 participant

Read full topic