Geek Answers Handbook

Remove parameter from queryParams angular 2

I go to a specific page in my application with a request parameter. After I get the parameter from the URL, I want to remove it, ideally I would do this:

let userToken: string; this.sub = this.router .routerState .queryParams .subscribe(params => { userToken = params['token']; params['token'].remove(); });

But obviously, the delete function does not exist. Does anyone have an alternative?

+14
source share
8 answers

Just in case, if people find this thread (like me). I have a script that I get a JWT token in the query string ( /login?jwt=token ). I needed to get this token (and save it, etc.), but then I had to make sure that it was safely removed from the URL. Rebooting the login route (using this.router.navigate(['login'] ) works in principe, however the user can then use the browser return button, basically playing back the token login.

I solved this without using navigation, but adding the Location service (from @angular/common ). This service has a replaceState method that completely removes the token from the history, as well as from the URL.

  this.location.replaceState('login')

Hope this helps someone.

+34
source

You can assign null specific Param request:

this.router.navigate([], {queryParams: {page: null}, queryParamsHandling: 'merge'});

+21
source

UPDATE No need to add queryParams to rc6 anymore.

Not sure if this is the case:

After routing to a component with request parameters, all other URLs of this component automatically contain request parameters. Each time you go to a different URL, the request parameters remain.

If so, one of the possible solutions may be in the request parameters in the html tag

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

If not, I'm also interested in the answer: P

+3
source

Imperative method but cleaner:

this.router.navigate(['.'], { relativeTo: this.route, queryParams: {} });

+3
source

I am using the navigateByUrl router method.

Alternative Document: Angular Documentation

Keep in mind that the way you feed him is considered absolute. You cannot use relative component routing with this method.

My use I have a component that serves as an external callback for auth events such as password reset and email verification. Upon completion of the operation, any navigation action should occur through router.navigateByUrl(path)

+2
source

HTML5 includes the history.pushState API, which allows you to add history entries and change the URL that is currently displayed in the browser. (Browser History Management)

window.history.pushState('', 'title', '/expected-url');

You can use this line of code in your Angular2 application. This will simply change the URL, not the state of the application. (the query result parameter removes from the given URL)

+2
source

I searched for the answer when I wanted to remove the access_token parameter from the url. If you just need to delete one parameter and save the other parameters.

 setTimeout(() => { let urlWithoutAccessToken = this.router.url.replace(new RegExp('.access_token=' + idToken), ''); this.router.navigateByUrl(urlWithoutAccessToken); }, 0);

For some reason setTimeout was needed, navigateByUrl did not work without it.

+2
source

I would like to suggest this method that is compatible with all Angular X routing strategies:

  this.route.queryParams.subscribe(params => { let token = params['jwt']; if (token) { this.cache.set({t: 't'}, token); window.location.href = this.router.url.split('?')[0]; } });
0
source

More articles:


All Articles