Attempting to pass query params via nav controller doesn’t seem to work.
Here is a simplified version of what I have.
this.navController.goForward(`/person/${personId}`, true, { queryParams: { something: 55 }});
This will correctly navigate to the page for route “/person/:personId” but the query parameter is not appended to the url.
I can’t find any documentaton stating that query params should be defined on the route and I can manually append the query string to the url and it works OK. Is this just a bug in NavController? Or is my call signature wrong?
Did you figure this out? I have the same issue
You could make a route in your routes
`{ path: 'person/:id', loadChildren: './pages/person/person.module#PersonPageModule' },`
and in your person.page.ts you can inject ActivatedRoute in the constructor
constructor(private activeRoute: ActivatedRoute)
{
this.person_id = +this.activeRoute.snapshot.paramMap.get('id');
}
2 Likes
or just create a provider, put your params in it, navigate and read them back from there
I do that for my navigation when objects have to be passed between views
I do have a route. In my original example I get personId from the route but I also have additional optional parameters that make more sense as query parameters. I could try it declaratively but I have some logic applied before the navigation that I’d rather not force into the template. Besides, this is clearly something that should work.
I opened a github ticket for this: https://github.com/ionic-team/ionic/issues/15219
Looks like it’s an issue with the underlying Angular Router.navigateByUrl() call (that doesn’t properly use query params either).
You can work around it with something like this:
this.navController.goForward(`/person/${personId}?something=${encodeURI(somethingValue)}`);
If it was something I was doing a lot I would definitely create a wrapper that takes in a query param object and handles encoding & appending all the params (ie: what Router.navigateByUrl should be doing).
1 Like