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

Question

Is it possible to change a single route parameter in the current route, while keeping all the other parameters? This is for use in a paging component, which will route to a new page while keeping the other parts of the current route the same.

Some examples:

• Default page to page 2: orders?foo=foo&bar=bar > orders?foo=foo&bar=bar&page=2
• Default page to page 2 (child): orders/;foo=foo;bar=bar > orders/;foo=foo;bar=bar;page=2
• Page 2 to 3 on child and parent with parameters: orders/;foo=foo;page=2?bar=bar > orders/;foo=foo;page=3?bar=bar

I have tried using a routerLink, however this loses any additional parameters that are not originally part of the router link.

I have also tried using the current Router to get an Instruction for the current path, however changing the parameters of the Instruction does not seem to have any effect when calling navigateByInstruction().

Answer 1

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>

Answer 2

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));