Angular2 different route parameters

Question

I want to have multiple functions in my appication activated through different parameters. The problem is that I have to distinguish between the routes. At the moment I 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 am doing something wrong. As example when I do /employee/new it goes into the first if with the if(params['id']) instead of the if(params['option']) where it should go because new is an option not an id.

I know I am doing many things wrong here but I am 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 distinguishing

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 lots of input to read. But I appreciate everyone who is reading it.

Answer 1

You cannot map two path with the same exact segments as parameter. However, you can manually dispatch to the correct component. You can for exemple use this code.

Routes

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

Parameter dispatch

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
        () => {}
    );