0

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

因此我的路由看起来像这样：

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

这是我如何做路由器链接：

<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

我究竟做错了什么？

4

1 回答 1

0

子路由不应以斜杠“/”开头。

DepartmentsComponentcontains的路由:fname，而 child contains :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,...]，而不是 [department, ...]。

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

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

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

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

于 2017-02-20T05:30:30.500 回答