Angular2不同的路由参数答案

【问题标题】：Angular2 different route parametersAngular2不同的路由参数
【发布时间】：2016-08-23 14:22:32
【问题描述】：

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

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

}

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

【问题讨论】：

您的第二条和第三条路线相同，最终它们将导致冲突path: ':type/:id' 将被path: ':type/:option' 覆盖，因为您具有相同的模式，我会说使用此{ path: 'department/:option', component: EmployeeManagementTableComponent }, { path: 'employee/:option', component: EmployeeManagementTableComponent }
是的，我知道。它不工作。但我找不到这个问题的解决方案。你知道我应该如何声明我的路线吗？
我会说有employee 和department 的专用路线，就像我在上一条评论中显示的那样......
抱歉，我没有看到您编辑了您的评论。我已经这样做了，但是我如何访问现在不再像employee 和department 这样的变量？在我可以用params['type'] 做到这一点之前。
但在这种情况下 employee/:id 和 employee/:option 将再次成为相同的结构还是我错了？

标签： angular angular2-routing

【解决方案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
        () => {}
    );

【讨论】：

这也是一个很好的解决方案。使用p.match()，您可以检查 p 是否为小数？
@moessi774 我检查它是否匹配正则表达式 \d+ （只有数字）。