Angular2 Маршрутизация с параметрами URL - PullRequest
Новая
       8

Angular2 Маршрутизация с параметрами URL

0 голосов
/ 13 июня 2018

Существует ли элегантное решение - во имя 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] 
}

С тем же компонентом Calendar, который я хочу обслуживать

  • xyz.com/calendar
  • 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, работает в той же строке кода, что и в Угловая ошибка 5 TypeError: на выходе задано нулевое значение / невозможно прочитать свойство 'компонента'null при маршрутизации

Угловой 5.1.0

Спасибо.

1 Ответ

0 голосов
/ 13 июня 2018

Ваша установка должна выглядеть примерно так 

{ 
  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 для маршрута, чтобы работать, если вы хотите иметь календарь, а также календарь / 2018-2-12, вам нужно будет создать два отдельных компонента и разместить компонент urlstring внутри компонента календаря в router-outlet

...