Angular2 various route options

Question

I want several functions in my application to be activated using different parameters. The problem is that I have to distinguish between routes. I currently need these routes:

• /employee-management/department/new
• /employee-management/department/delete ,
• /employee-management/employee/new ,
• /employee-management/employee/delete
• /employee-management/employee/<id>

Here is my current implementation. But I'm doing something wrong. As an example, when I do /employee/new , it goes to the first if with if(params['id']) instead of if(params['option']) , where it should go, because new is an option, and not id.

I know I do a lot of things here, but I'm stuck. Can you help me?

Routes

 export const EmployeeManagementRoutes: RouterConfig = [ { path: 'employee-management', component: EmployeeManagementComponent, children: [ { path: '', component: EmployeeManagementTableComponent, pathMatch: 'full' }, { path: ':type/:id', component: EmployeeManagementTableComponent }, { path: ':type/:option', component: EmployeeManagementTableComponent } ] } ]; 

Parameter Differences

 this.route.params.subscribe( //Success params => { this.logger.log("Param "+params); let type = params['type']; this.logger.log("Type "+type); if(type === "employee"){ if(params['option']){ let option = params['option']; this.logger.log("Option "+option); this.doEmployeeOption(option); }else if(params['id']){ let id = params['id']; this.logger.log("ID "+id); this.editEmployee(id); } }else if(type === "department"){ if(params['option']){ let option = params['option']; this.logger.log("Option "+option); this.doDepartmentOption(option); } } }, //Error err => this.logger.error(err), //Complete () => {} ); doEmployeeOption(option: String){ switch(option){ case 'new': this.newEmployee = true; this.employee = new Employee(); break; case 'delete': break; default: this.logger.log("Default"); break; } } 

Sorry for the amount of input. But I appreciate everyone who reads it.

Answer 1

You cannot match two paths with the exact same segments as the parameter. However, you can manually send the correct component. You can use this code.

Routes

 export const EmployeeManagementRoutes: RouterConfig = [ { path: 'employee-management', component: EmployeeManagementComponent, children: [ { path: '', component: EmployeeManagementTableComponent, pathMatch: 'full' }, { path: ':type/:param', component: EmployeeManagementTableComponent } ] } ]; 

Submit Settings

 this.route.params.subscribe( params => { this.logger.log("Param "+params); let type = params['type']; this.logger.log("Type "+type); let p = params['params']; if(type === "employee"){ if(p.match(/\d+/)){ let id = +p; this.logger.log("ID "+id); this.editEmployee(id); } else { let option = p; this.logger.log("Option "+option); this.doEmployeeOption(option); } }else if(type === "department"){ if(p){ let option = p; this.logger.log("Option "+option); this.doDepartmentOption(option); } } }, //Error err => this.logger.error(err), //Complete () => {} );