How to update matrix parameters in Angular2

Issue

In Angular2, is there a way to update a matrix parameter, but navigate to the same component? Basically would like to transition easily from a url that looks like:

/search;term=paris;pageSize=24;currentPage=1;someFilter=value;

to the same thing, but with currentPage updated upon pagination:

/search;term=paris;pageSize=24;currentPage=2;someFilter=value;

using router.navigate hasn’t appeared to be the best option, since I’d have to write plenty of my own logic to re-construct the url for navigate‘s use (re-constructing something that already exists).

For kicks and giggles, I did try

this._router.navigate([this._router.url, {currentPage: this.pagination.currentPage}]);

but (as you might expect), the router is dumb to the fact that there are matrix parameters on the current url, so the result is not pretty.

EDIT: Should also mention that there may be any number of additional key/value pairs of matrix parameters, so hard-coding any route is out of the question

EDIT: I’ve since tried to use preserveQueryParams: true like:

this._router.navigate(["..", {currentPage: this.pagination.currentPage}], {preserveQueryParams: true});

in order to get to an easily usable/transferable solution, but that did not keep the matrix params on the route.

UPDATE: I’ve since implemented my own logic to get the required behavior, so here’s a code snippet for the solution:

  let currentParamsArr: Params = this.route.snapshot.params;
  let currentParamsObj: any = { };
  for (let param in currentParamsArr) {
    currentParamsObj[param] = currentParamsArr[param];
  }
  currentParamsObj.currentPage = +pageNum; //typecasting shortcut

  this._router.navigate([currentParamsObj], { relativeTo: this.route });

This code loops through the parameters (as they stand in the snapshot), and creates an object out of them, then adds/edits the parameter that I desire to update, then navigates to the “new” route

But, this is not pretty, as I’ll essentially have this same logic in many places of the program or have to make a modification to Router or provide some other generic method.

Solution

The approach that ended up working well for me is this:

let route: ActivatedRoute;
const newUrl = router.createUrlTree([
  merge({'a': 123}, route.snapshot.params)
], {relativeTo: route});

By using merge, you can add, update and subtract url parameters and then use router.navigateByUrl(newUrl) in order to execute.

add: merge({newParam: 111}, route.snapshot.params)

update: merge({param: 111}, route.snapshot.params)

subtract: merge({param: null}, route.snapshot.params)

Hope others find this as useful as I have.

Another example using Object.assign instead of merge:

let route = this.route; // The imported ActivatedRoute
let currentParamsObj: Params = Object.assign({}, route.snapshot.params);

let newParam = {};
newParam[key] = value;

let newUrl = this._router.createUrlTree([
        Object.assign(currentParamsObj, newParam)
    ], {relativeTo: this.route });

this._router.navigateByUrl(newUrl);

Answered By – Corbfon

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0