Angular2 inested children routing не находит соответствие маршрута

Question

У меня есть меню с некоторыми кнопками, когда пользователь нажимает на меню, страница перенаправляется на другую страницу со списком кнопок, на которых есть ссылка на другую страницу.

Поэтому мой маршрутизации выглядит следующим образом:

const routes: Routes = [ 
 
    { 
 
    path: '', 
 
    data: { 
 
     title: 'Components' 
 
    }, 
 
    children: [ 
 
     { 
 
     path: 'departments/:fname', 
 
     component: DepartmentsComponent, 
 
     data: { 
 
      title: 'Departments' 
 
     }, 
 
     children: [ 
 
      { 
 
      path: '/:dname/modules', 
 
      component: ModulesComponent, 
 
      data: { 
 
       title: 'Modules' 
 
      } 
 
      } 
 
     ] 
 
     }, 
 
    ] 
 
    } 
 
];

Таким образом, пользователь изначально имеет URL из:

components/departments/informatics

Когда пользователь нажимает на любой из кнопок внутри страницы, It shou ld должен быть перенаправлен на страницу модулей с параметром перед ним. Например:

components/departments/informatics/modules

Heree как я сделать routerlink:

<div class="row" *ngFor="let fac of _faculty"> 
 
    <ul> 
 
    <li *ngFor="let dep of fac.Departments" class="checking"> 
 
     <a routerLinkActive="active" [routerLink]="[department ,'modules']"> 
 
     </a> 
 
    </li> 
 
    </ul>

я получаю: Error: Cannot match any routes. URL Segment

Что же я делать не так?

Answer 1

Детский маршрут не должен начинаться с косой черты '/'.

Маршрут DepartmentsComponent содержит :fname, и ребенок содержит :dname, поэтому ожидаемый маршрут 'departments/:fname/:dname/modules'. Я думаю, вы можете удалить :fname:

const routes: Routes = [ 
    { 
    path: '', 
    data: { 
     title: 'Components' 
    }, 
    children: [ 
     { 
     path: 'departments', 
     component: DepartmentsComponent, 
     data: { 
      title: 'Departments' 
     }, 
     children: [ 
      { 
      path: ':dname/modules', 
      component: ModulesComponent, 
      data: { 
       title: 'Modules' 
      } 
      } 
     ] 
     }, 
    ] 
    } 
]; 

* ngFor переменная DEP, поэтому ссылка должна быть [отд ...], а не [отдел ...].

<li *ngFor="let dep of departments"> 
    <a routerLinkActive="active" [routerLink]="[dep ,'modules']">{{dep}} 
    </a> 
</li> 

Вот пример: http://plnkr.co/edit/WvvCDwIind2QQXY88lay?p=preview

редактировать: только что понял: имя_файла был факультет, но тот же принцип должен применяться.

редактировать 2: plunker раствором без детского маршрута второго уровня: http://plnkr.co/edit/GJ0KBTIlPoloBr0cbEHS?p=preview