Clear all queryParams with new Router v3 Angular2

Question

I\'m trying to figure out how to use the Angular2 router navigation (router 3.0.0-alpha.7) with query parameters.

I can easily navigate to a route with a queryParam

Answer 1

Actually ... you should NOT "expect the router to clear query params".

Clearly you DO expect that. But that's because you don't know about an important router design decision ... probably because, unfortunately, we haven't told you about it in the docs yet. We're working on correcting that now.

QueryParams are for parameters that are global across navigations; they do not change.

MatrixParams are for parameters that belong to the current navigation; these do change.

What belongs in global QueryParams? Stuff that comes from the server are candidates. Like auth tokens that belong on every interaction.

But required route params (the :id in customer/:id) and optional matrix params (like the ;name=Jo* in /customers;name=Jo*) are local to one navigation. That's how you might specify a navigation for customers with an optional name filter.

Whether or not you agree with this approach, it is fundamental to the v.3 router design.

I suggest adjusting your expectations rather than fighting it.

Answer 2

I struggled with this as well. You would expect the router to clear query params by default when navigating to another route...

You can do either

this._router.navigate(['/route1'], {queryParams: {}});

or

this._router.navigateByUrl('/route1');

or when using routerLink:

<a [routerLink]="['/applications']" [queryParams]="{}"> Applications</a>

Answer 3

You can simply use preserveQueryParams: false parameter to ignore query params

this.router.navigate(['target'], {preserveQueryParams: false});