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

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: