@falcon_sapsan
DevOps

Как правильно настроить роутинг в Angular2?

Делаю банальный роутинг, чтобы можно было просмотреть список вложенных категорий
Категории верхнего уровня
/category/
URL вложенных категорий строиться по принципе
/category/f4187aa8-a415-11e7-b8ea-52540012f636
/category/f4187bd4-a415-11e7-b8ea-52540012f636
Т.е. фактически кликая на категорию - мы меняем только UUID и должны увидеть вложенные категории

Но вместе изменения UUID в URL я получаю ошибку
NavigationError
core.es5.js:1020 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'component' of null
TypeError: Cannot read property 'component' of null
    at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverseRoutes (router.es5.js:4346)
    at router.es5.js:4308
    at Array.forEach (<anonymous>)
    at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverseChildRoutes (router.es5.js:4307)
    at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverseRoutes (router.es5.js:4338)
    at router.es5.js:4308
    at Array.forEach (<anonymous>)
    at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverseChildRoutes (router.es5.js:4307)
    at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverse (router.es5.js:4264)
    at MapSubscriber.project (router.es5.js:4103)
    at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverseRoutes (router.es5.js:4346)
    at router.es5.js:4308
    at Array.forEach (<anonymous>)
    at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverseChildRoutes (router.es5.js:4307)
    at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverseRoutes (router.es5.js:4338)
    at router.es5.js:4308
    at Array.forEach (<anonymous>)
    at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverseChildRoutes (router.es5.js:4307)
    at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverse (router.es5.js:4264)
    at MapSubscriber.project (router.es5.js:4103)
    at resolvePromise (zone.js:824)
    at resolvePromise (zone.js:795)
    at zone.js:873
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425)
    at Object.onInvokeTask (core.es5.js:3881)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:192)
    at drainMicroTaskQueue (zone.js:602)
    at ZoneTask.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:503)
    at invokeTask (zone.js:1540)


<a [routerLink]="['/category/',row.category_uuid]">{{row.category_name}}</a>

{
    path: 'category', component: CategoryManagerComponent, canActivate: [AuthServiceComponent], 
    children: [
         { path: ':uuid', component: CategoryManagerComponent,  canActivate: [AuthServiceComponent]}
    ]}
  • Вопрос задан
  • 311 просмотров
Пригласить эксперта
Ответы на вопрос 2
Документация
Еще можно здесь глянуть.
Если я правильно понял суть проблемы, то вы не правильно написали path.
Надо как то такpath : 'category/ :uuid'
Ответ написан
@falcon_sapsan Автор вопроса
DevOps
решил пока проблему следующим образом.
{
    path: 'category', component: CategoryManagerComponent, canActivate: [AuthServiceComponent], children: [
    { path: ':uuid', component: CategoryManagerComponent,  canActivate: [AuthServiceComponent]}
  ]},
    {
    path: 'category-detail/:uuid', component: CategoryManagerComponent, canActivate: [AuthServiceComponent]
    },


По всей видимости uuid в child нельзя менять, это вызывает ошибку. Если uuid меняется на первом уровне - то все нормально
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы