Angular2 嵌套子路由找不到匹配的路由

Question

我有一个带有一些按钮的菜单，当用户单击菜单时，该页面被定向到另一个页面，其中包含按钮列表，这些按钮列表 link 到另一个页面。

因此我的路由是这样的：

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

当用户点击页面内的任何按钮时，它应该被定向到前面有参数的模块页面。例如：

components/departments/informatics/modules

这是我如何设置路由器link:

<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，child包含: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，所以 link 应该是 [dep,...]，而不是 [department, ...]。

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

这里有一个例子：http://plnkr.co/edit/WvvCDwIind2QQXY88lay?p=preview

编辑：刚刚意识到 :fname 是 faculty，但同样的原则应该适用。

编辑 2：没有二级子路由的解决方案的 plunker：http://plnkr.co/edit/GJ0KBTIlPoloBr0cbEHS?p=preview

Angular2 嵌套子路由找不到匹配的路由

Angular2 nested children routing does not find the route match

angular

typescript

angular-routing

angular2-modules

angular-component-router