Angular2, how to clear URL query params on router navigate
As DeborahK pointed out, when I was navigating to this.router.url, that URL already had the url params embedded. To solve I stripped the params off the URL as a string, and then used navigateByUrl to jump there.
let url: string = this.router.url.substring(0, this.router.url.indexOf("?"));
this.router.navigateByUrl(url);
If you don't want to reload the page you can also use Location
import { Location } from '@angular/common';
[...]
this.location.replaceState(this.location.path().split('?')[0], '');
this.location.path()
provides you with the current path. You can remove the params by resetting the page's path with everything in the URL before the ?
.
You can add replaceUrl: true
in your navigation extras. This way, the router will navigate to the same page but you still remain in the same state in history with the url parameters gone, while still allowing you to go back to the previous route.
From the docs:
Navigates while replacing the current state in history.
this.router.navigate([], { replaceUrl: true});
Using navigateByUrl
will drop off the query parameters if you pass it a URL without the query parameters.
Or you could try:
this.router.navigate(this.router.url, { queryParams: {}});
NOTE: navigate
and not navigateByUrl
Does that work?