Angular2ネストされた子ルーティングでルートの一致が見つかりません

Question

私はいくつかのボタンを持つメニューを持っています。ユーザーがメニューをクリックすると、そのページは別のページへのリンクを持つボタンのリストを持つ別のページに送られます。ユーザーがいずれかをクリックすると

components/departments/informatics

：

ので、私のルーティングは次のようになります。

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/modules

私はrouterlink行う方法Hereeさん：

<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ので、リンクは[DEP、...]ではなく[部門、...]でなければなりません。ここで

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

例です。http://plnkr.co/edit/WvvCDwIind2QQXY88lay?p=preview

編集：ちょうど実現：fnameには教員だったが、同じ原理が適用されるべきです。

編集2：第2レベルの子ルートなしの溶液でplunker：http://plnkr.co/edit/GJ0KBTIlPoloBr0cbEHS?p=preview