Question

我希望通过不同参数激活我的应用程序中的多个功能。问题是我必须区分路线。目前我需要这些路线：

/employee-management/department/new
/employee-management/department/delete，
/employee-management/employee/new，
/employee-management/employee/delete
/employee-management/employee/<id>

这是我目前的实施。但我做错了。例如，当我执行/employee/new时，它会使用if而不是if(params['id'])进入第一个if(params['option'])，因为new是一个选项而非id。

我知道我在这里做了很多错事但是我被困住了。你能救我吗？

路线

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 
  }
]
}
];

参数区分

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;
    }

}

很抱歉要阅读很多输入。但我感谢所有阅读它的人。

Answer 1

您无法使用与参数完全相同的段映射两条路径。但是，您可以手动分派到正确的组件。例如，您可以使用此代码。

路线

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

参数调度

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

Angular2不同的路由参数

1 个答案:

路线

参数调度