NavController.goForward() Query Params

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 you can inject ActivatedRoute in the constructor

constructor(private activeRoute: ActivatedRoute)
    this.person_id = +this.activeRoute.snapshot.paramMap.get('id');

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:

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:


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