Usually replace the Angular 2 parameter and move around

Question

I am creating an Angular application in which most routes will be relevant to this project and contain projectId. The top navigation pane will have a drop-down list of projects. When the user selects a project from the drop-down list, he needs to go to the current route, but with the replacement of projectId with a new value.

This is very similar to the Angular transition to url, replacing the existing parameter , however their accepted answer used the request parameters; this is necessary to work with the required route parameters. In addition, projectId can be displayed in different directions of the route, therefore, for this, it is generally necessary to change the route parameter by name.

So, hypothetically, I could have the following routes:

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

These routes are fictitious, but demonstrate that projectId can appear in different positions and will not precede any specific word (therefore, I cannot, for example, search for a segment with the name "project" and then capture the next segment).

Conceptually, I would like

• Take the current route and route parameter maps (for example, paramMap), query parameters and matrix parameters from the router
• If necessary, change the values ​​on these cards, namely if paramMap contains "projectId", and then update it.
• Send the route and maps back to the router to move there.

So this seems conceptually simple, but when I look at the router of the State router and its route tree (which I don’t quite understand) and the Router.navigate method, I don’t see how to achieve this. I have no problem walking the route tree to reassemble the route, if 1) this can be done in the general case without any knowledge of the route structure of the application and 2) the resulting route is identical to the original route (including query and matrix parameters), except for changing the target route parameter (projectId).

Answer 1

How about this:

I have ActivatedRoute and Router introduced in my service / component:

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

Then I made a way to change the route matrix parameter. Parameters is the name of the matrix parameter to be replaced and the new value. I did not find another way to search for a parameter to replace, except for 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');