Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Clear all queryParams with new Router v3 Angular2

Tags:

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 with this line:

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

In the '/login' component, I do some login which will redirect to the redirect route, namely route1 here. However, after the redirection, the redirect query parameters stays in the URL, i.e. I'm now at page /route1?redirect=route1. I want to remove the redirect parameter here.

Moreover, if I then navigate to another page with the same redirect queryParam, it doesn't overwrite the previous one, but adds another ?redirect=... in the url. Namely:

this._router.navigate(['/another-route'], {queryParams: {redirect:'route2'}});

leads me to /another-route?redirect=route2?redirect=route1

Is it possible to clear the queryParams when navigating between routes? I tried this._router.navigate(['/route1'], {queryParams: {redirect: null}});, or {queryParams: null} etc but no success.

like image 637
jeanpaul62 Avatar asked Jul 07 '16 09:07

jeanpaul62


People also ask

What is Queryparamshandling?

QueryParamsHandlinglinkHow to handle query parameters in a router link. One of: "merge" : Merge new parameters with current parameters. "preserve" : Preserve current parameters.

What is skipLocationChange?

skipLocationChange: boolean. You can change the route, without changing the URL in the browser. This Navigates to a new URL without pushing a new state into history.


2 Answers

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>
like image 106
Yaron Schwimmer Avatar answered Nov 09 '22 23:11

Yaron Schwimmer


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.

like image 27
Ward Avatar answered Nov 09 '22 22:11

Ward