How can I change Angular2 route parameters without navigating to the route?

Question

I have an angular2 page shows a list of items. I restrict the list initially by using the route paramters so my URL is something like:

http://localhost:54675/#/listing?filter={"Country":[6, 7]}

This will show items in the country with an ID of 6 or 7.

Then the users adds a third country (let's say 8) and I make a service call which updates the list. Since the list items are bound to an observable the list then updates on the screen.

This is exactly the behavior I want. But if the user bookmarks this page they only get the original route parameters and not the filtered results.

To fix this, I use:

this._router.navigate(['listing', { filter: newfilter }]);

This reloads the page with this route:

http://localhost:54675/#/listing?filter={"Country":[6,7,8]}

This keeps everything in sync and bookmarks work. However, there is a full page refresh. Other items load again - not just the filtered results. I also like the visual results better when it's just a single service call.

I need a way to change the route parameters without reloading the page.

Answer 1

You can use the Router only to create the URL and then use the Location to change the URL without navigating.

Something like this:

import { Location } from '@angular/common';
import { Router } from '@angular/router';

// Generate the URL:
let url = this.router.createUrlTree(['listing', { filter: newfilter }]).toString();

// Change the URL without navigate:
this.location.go(url);