带有url参数的Angular2路由

Question

是否有一种优雅的解决方案（以DRY的名义）针对以下路由定义？

{ 
   path: CalendarComponent.path, /* the path is 'calendar' */
   component: CalendarComponent, 
   canActivate: [AuthGuard, EmployeeGuard],
   data: {
     navi: {
       at: 'main'
     },
     roles: {
       employeeOnly: true
     }
   },
},
{ 
   path: CalendarComponent.path + '/:urlString', 
   component: CalendarComponent, 
   canActivate: [AuthGuard, EmployeeGuard] 
}

使用相同的CalendarComponent，我希望能够提供服务

• xyz.com/ 日历
• xyz.com/ calendar / 2018-06-12

我尝试如下定义此路由：

{ 
   path: CalendarComponent.path,
   component: CalendarComponent, 
   canActivate: [AuthGuard, EmployeeGuard],
   data: {
     navi: {
       at: 'main'
     },
     roles: {
       employeeOnly: true
     }
   },
   children: [
     {
        path: ':urlString',
        component: CalendarComponent
     }
   ]
}

但是然后它说Cannot read property 'component' of null @ router.js：3628，运行到与Angular 5 TypeError中相同的代码行：出口为null /路由时无法读取null的属性'component'

角5.1.0

谢谢。

Answer 1

您的设置应该看起来像这样

{ 
  path: 'calendar/:urlstring', /* the path is 'calendar' */
  component: CalendarComponent, 
  canActivate: [AuthGuard, EmployeeGuard],
  data: {
    navi: {
     at: 'main'
    },
    roles: {
      employeeOnly: true
    }
  },
}

有了这个，您将可以访问xyz.com/calendar/2018-2-4，但不能访问xyz.com/calendar，因为如果要使用日历，则需要具有用于工作路线的urlstring，然后具有calendar / 2018-2-12，您将需要创建两个单独的组件，并将urlstring组件嵌套在router-outlet的Calendar组件内