Passing strings as route parameters in Angular without encoding

Question

I am trying to pass a string using this code:

  this.router.navigate(['/systems', params.toString()]);

The route parameter is then appended to a URL for an API call. The params.toString() is change_user=2258. When it is sent through the browser however, it is changed to change_user%3D2558 on the URL. When I use the developer tools to see what was sent to the API, it was changed to NaN.
How do I pass a string through a router, so that I can directly append it to my API string?

Edit: The variable params is of type URLSearchParams(). This is how I'm trying to extract the parameter:

this.route.paramMap.switchMap((params: ParamMap) => 
this.httpService.getSites(+params.get('params')))
.subscribe(sites => this.sites = sites);

Answer 1

So here was how I fixed it:

All I had to simply do was take out the + in the +params.get() call. Apparently what that does is try and convert it to a number. Now I am able to pass in my params.toString() directly.

Answer 2

Add a route definition with a parameter as described here in the Angular 2 routing documentation

{ path: 'hero/:id', component: HeroDetailComponent }

Option 1

You then will be able to navigate to the route with

let id = 2258;
this.router.navigate(['/hero', id]);

And use the ActivatedRoute in @angular/router to extract the parameters as described here in the documentation

let id = this.route.snapshot.paramMap.get('id');

Option 2

Use the router.navigateByUrl() methods (documentation here)

router.navigateByUrl('/hero/2258');