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/

这是我目前的实现.但我做错了什么.例如，当我执行 /employee/new 时，它使用 if(params['id']) 而不是第一个 ifif(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屋！