Generically replace Angular 2 route parameter and navigate

Question

I'm building an Angular app in which most of the routes will pertain to a given project and contain a projectId. In the top navigation area will be a drop-down list of projects. When the user selects a project from the drop-down, it needs to navigate to the current route but with the projectId replaced with the new value.

This is very similar to Angular navigate to url by replacing an existing parameter, however their accepted answer used query parameters; this needs to work on required route parameters. Also the projectId may appear in different positions within the route, so this needs to generically be able to swap out a route parameter by name.

So hypothetically I might have the following routes:

project/:projectId/details
dashboard/status/:projectId/:year/:month/:day
admin/projects/:projectId
admin/contacts/:projectId/settings
admin/generalSettings

Those routes are fictional but demonstrate that the projectId may appear in various positions and will not be preceded by any specific word (so I cannot e.g. look for a segment named "project" then grab the next segment).

Conceptually, I'd like to

• Grab from the router the current route and maps of the route params (like paramMap), query params, and matrix params
• Modify the values in those maps as needed, namely if the paramMap contains "projectId" then update it.
• Hand the route and the maps back to the router to navigate there.

So it seems conceptually simple, but when I look at the Router's routerState and its tree of routes (which I don't quite understand) and the Router.navigate method, I don't see how to achieve this. I don't have a problem with walking the route tree to re-build the route, so long as 1) it can be done generically without any knowledge of the app's route structure, and 2) the resulting route is identical to the original route (including query and matrix parameters) other than the change to the targeted route parameter (projectId).

Answer 1

What about this:

I have the ActivatedRoute and Router injected into my service/component:

constructor(
    private route: ActivatedRoute,
    private router: Router) {}

Then I made a method for changing the route matrix parameter. Parameters are the name of the matrix parameter to be replaced and the new value. I found no other way of looking up the parameter to replace other than comparing path segments with the parameters of the activated route.

changeParam(replaceParamName: string, val: any) {
    let replacePathParamIndex;
    let replacePathParamValue;
    this.route.params
        .map((params) => replacePathParamValue = params[replaceParamName])
        .mergeMap(() => this.route.url)
        .map((urlSegment) =>
            urlSegment.map((segment, ndx) => {
                if (segment.path === replacePathParamValue) {
                    replacePathParamIndex = ndx;
                }
                return segment.path;
            })
        )
        .subscribe((pathparts: any[]) => {
            pathparts[replacePathParamIndex] = val;
            this.router.navigate(pathparts);
    });
}

Finally navigate to the replaced route by calling:

changeParam('projectId','newprojectid');