How to update matrix parameters in Angular2

Question

In Angular2, is there a way to update the matrix parameter, but go to the same component? Basically, it's easy to go from a URL that looks like this:

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

besides, but with currentPage is updated when paginated:

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

using router.navigate apparently not the best option, since I would have to write a lot of my own logic to rebuild the url to use navigate (rebuild something that already exists).

For bumps and giggles I tried

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

but (as expected), the router is not careful about the fact that the current URL has matrix parameters, so the result is small.

EDIT: It should also be mentioned that there can be any number of additional key / value pairs of matrix parameters, so hard coding of any route is out of the question

EDIT: Since then, I have tried using preserveQueryParams: true as:

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

to go to an easy to use / portable solution, but did not save the matrix parameters on the route.

UPDATE: since then I have implemented my own logic to get the required behavior, so here is the 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 goes through the parameters (as they are in the picture) and creates an object from them, then adds / edits the parameter I want to update, then goes to the "new" route

But this is not entirely true, since I will essentially have the same logic in many places of the program or must make changes to the Router or provide some other common method.

Answer 1

The approach that ultimately works well for me is this:

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

Using merging, you can add, update, and subtract URL parameters, and then use router.navigateByUrl(newUrl) 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 helpful as I do.

Another example using Object.assign instead of merge:

 let route = this.route; // The imported ActivatedRoute let currentParamsObj: Params = Object.assign({}, route.params); let newParam = {}; newParam[key] = value; let newUrl = this._router.createUrlTree([ Object.assign(currentParamsObj, newParam) ], {relativeTo: this.route }); this._router.navigateByUrl(newUrl); 

Answer 2

You tried to use something like

 this._router.navigateByUrl('/search;term='+this.term+';pageSize='+this.pageSize+';currentPage='+this.currentPage+';someFilter='+this.someFilter;