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/的日历/ 2018年6月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: outlet is null / cannot read property 'component' of null while routing中相同的代码行

Angular 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

中的日历组件中

Angular2路由与url参数

1 个答案: