Change a single route parameter on the current route in Angular 2

I would be nice if the activeRoute could return a simple clone of the current route [] to be manipulated before call to router.navigate(nextroutearray), but i did not find such method in the api.

I therefore centralized the requirement into a simple service, where i can parse the current activeRoute, + a set of parameters to be used for the next route. I do not think this code will cover all the complexity of the url in a route, but in my case, I only use parameters on the last part of the route, so it works for me:

The service method looks like this:

routeFor(activeRoute: ActivatedRoute, params: any): any[] {    let result = [];    result.push('/');    for (var i = 0; i < activeRoute.pathFromRoot.length; i++) {        activeRoute.pathFromRoot[i].snapshot.url.forEach(r => result.push(r.path));    }    let currentParams = activeRoute.pathFromRoot[activeRoute.pathFromRoot.length - 1].snapshot.url[0].parameters;    for (var n in currentParams) {        if (currentParams.hasOwnProperty(n) && !params.hasOwnProperty(n)) {            params[n] = currentParams[n];        }    }    result.push(params);    return result;}

Then i can use this method in any component getting my sitemap service injected:

setNextTab(tab: string) {    let nextUrl = this.sitemapService.routeFor(this.activatedRoute, { pagetab: tab });    this.router.navigate(nextUrl);}

And in the html, the link to setNextTab method looks like this:

<li (click)="setNextTab('myTabName')">Next tab</li>

you can use query parameter option instead of parameter it is use like

in calling component

const navigationExtras: NavigationExtras = {  queryParams: { 'param_id': 1, 'param_ids': 2, 'list':[1,2,3] },};this.router.navigate(['/path'], navigationExtras);

in the called component

  this.route.queryParamMap.map(params =>  params.get('param_id') ||     'None').subscribe(v => console.log(v));  this.route.queryParamMap.map(params =>  params.get('param_ids') ||         'None').subscribe(v => console.log(v));  this.route.queryParamMap.map(params =>  params.getAll('list') ||             'None').subscribe(v => console.log(v));

Why you simply don't do this:

<a [routerLink]="['./Cmp', {limit: 10, offset: 10}]">Previous Page</a><a [routerLink]="['./Cmp', {limit: 10, offset: 20}]">Next Page</a>