[ionic v4] How to navigate between tabs with queryParameters

#1

I have an application with 5 tabs [Home, Search, Map, Info, Tarif].
I can navigate to the Map page directly from tab menu without parameter but also from Home page i want to access Map page with parameter.
I don’t know how to define the route into the tabs.router.module.ts

This is my tabs.router.module.ts

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'home',
        outlet: 'home',
        component: HomePage
      },
      {
        path: 'search',
        outlet: 'search',
        component: SearchPage
      },
      {
        path: 'map',
        outlet: 'map',
        component: MapPage
      },
      {
        path: 'info',
        outlet: 'info',
        component: InfoPage
      },
      {
        path: 'tarif',
        outlet: 'tarif',
        component: TarifPage
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/(home:home)',
    pathMatch: 'full'
  },
  { 
    path: 'search',
    redirectTo: '/tabs/(search:search)',
    pathMatch: 'full'
  },
  {
    path: 'map',
    redirectTo: '/tabs/(map:map)',
    pathMatch: 'full'
  }
];

and my app.routing.module.ts

const routes: Routes = [
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule', canActivate: [AuthGuard] },
  { path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule', canActivate: [AuthGuard] },
  { path: 'map', loadChildren: './pages/map/map.module#MapPageModule', canActivate: [AuthGuard] },
  { path: 'search', loadChildren: './pages/search/search.module#SearchPageModule', canActivate: [AuthGuard] },
  { path: 'station', loadChildren: './pages/station/station.module#StationPageModule', canActivate: [AuthGuard] },
  { path: 'info', loadChildren: './pages/info/info.module#InfoPageModule', canActivate: [AuthGuard] },
  { path: 'tarif', loadChildren: './pages/tarif/tarif.module#TarifPageModule', canActivate: [AuthGuard] }
];

to access Map page from Home page i use this:

goMap(){
    this.router.navigate(['map'], {queryParams: this.station});
  }

Thx for helping

#2

You need to change the routes in your tab.router.module to use loadChildren also if you want to lazy load them, and remove the imports for those pages…

Otherwise it looks fine. Are you asking how to get the queryParams in the map page?

#3

No i ask how to set correctly the url with queryParams when i navigate between tabs.
Because i do this:

this.router.navigate(['map'], {queryParams: this.station});

the url in my browser is

http://localhost:8100/tabs/(map:map)

So i don’t see the queryParams and in my Map page when i get queryParams like this:

this.station = this.route.snapshot.queryParams as Station;

station is undefined.
For me the route in my tabs.router.module is wrong but i don’t know how to configure it

Thank you

#4

Your navigate looks ok.

Here’s what I use most of the time to get the queryParams:
to navigate to the page:this.router.navigate(['member-profile', { 'id': member.id } ]);

import { Router, ActivatedRoute, ParamMap } from '@angular/router';
...
 constructor(public router: Router, private activatedRoute: ActivatedRoute, ..... whatever else
.....
ngOnInit() {
   this.activatedRoute.paramMap
     .subscribe((queryParams: ParamMap) => {
        this.memberId = queryParams.get('id');
    });
}
#5

Sorry but it doesn’t work…
You can see it on my repo: https://github.com/Anthony2539/waygng-ionic-v4

I have another case where queryParams works, but it’s between a tab page and no tab page navigation (SearchPage => StationPage) Station page is not a “tab page” so the url when navigate is http://localhost:8100/station?id=ALLEN1&latitude=47.219585&longitude=5.974183&name=Allende

While in my case it’s between tab page and the url is always http://localhost:8100/tabs/(map:map)
so we see that the parameters are not passed in the url

#6

@Gordon25 Thank for shared repository, i found answer for this issue.