Angular2, how to clear URL query params on router

问题:

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

回答1:

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);

回答2:

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?

回答3:

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 ?.

回答4:

Use the skipLocationChange option and it will not show parameters: suppose your url is

http://localhost/view

now something in your code sets the query parameters to

?q=all&viewtype=total

without the skipLocationChange your url in the browser ( after calling navigate) would be :

http://localhost/view?q=all&viewtype=total

with skipLocationChange : true it remains

http://localhost/view

let qp = { q : "all" , viewtype : "total" } 
this.router.navigate(['/view'], {  queryParams: qp,skipLocationChange: true });

回答5:

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});

回答6:

From angular 7.2 onward, you can use state

Sending

this.router.navigate(['routename'], { state: { param1: 'bar' } });

Receiving

let paramobj = history.state;
console.log(paramobj.param1);

By this you can send even large complex objects from template as well.