Question

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

因此我的路由如下：

＆＃13;

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'
            }
          }
        ]
      },
    ]
  }
];

＆＃13;

因此用户最初的URL为：

components/departments/informatics

当用户点击页面内的任何按钮时，应将其指向带有前面参数的模块页面。例如：

components/departments/informatics/modules

关于我如何做routerlink：

＆＃13;

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

＆＃13;

我得到： Error: Cannot match any routes. URL Segment

我做错了什么？

Answer 1

子路线不应以斜线＆＃39; /＆＃39;开头。

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，...]，而不是[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：没有二级子路线的解决方案：http://plnkr.co/edit/GJ0KBTIlPoloBr0cbEHS?p=preview

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

1 个答案: