[ionic v4] How to navigate between tabs with queryParameters

Ionic Framework
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.

7

Hey,
I am struggling with the same issue. How did you fix it?
Thanks :slight_smile:

8

Just get the full path with the router in your child tab and ‘clean’ the param(s) that you need. This is what I do to solve this issue.

import { Router } from "@angular/router";
.
.
.
  constructor(
    private router: Router
  ) { }

  ngOnInit() {
  this.param1 = this.router.url.replace('/parent/', '').replace('/childTab', '');
  console.log(this.param1);
}

Replace ‘parent’ and 'childTab’
Viva México lml

9

Apoologies, but I don’t see how this answers the question.

I’m also having the same problem as reported here:

The problem is: when clicking on a tab, in tab navigation, the page that we navigate to always has its query parameters stripped to nothing ‘’, i.e. it is not possible to navigate to another tab page with some query parameters - you can only navigate to another tab page without parameters. If anybody has solved this, it would be of great help!