I am struggling with clearing out URL params during nav in Angular 2.4.2. I have tried attaching every option to clear the params in the below navigation line, or any mix therein with navigate, or navigateByUrl, but cannot figure out how to accomplish.
this.router.navigateByUrl(this.router.url, { queryParams: {}, preserveQueryParams: false });
As an example I am at route /section1/page1?key1=abc&key2=def and want to stay at the same route but remove all the url parameters, so the end result should be /section/page1
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);
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?
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 ?.