Angular2不同的路线参数 [英] Angular2 different route parameters

问题描述

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

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>

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

这是我当前的实现.但是我做错了.例如，当我执行/employee/new时，它会与if(params['id'])一起进入第一个if，而不是应该进入的if(params['option'])，因为new是一个选项，而不是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?

路线

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

}

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

Sorry for the lots of input to read. But I appreciate everyone who is reading it.

推荐答案

您不能映射与参数完全相同的两个段.但是，您可以手动分派到正确的组件.例如，您可以使用此代码.

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.

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不同的路线参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！