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

我有一个带有一些按钮的菜单，当用户点击菜单时，页面被引导到另一个带有链接到另一个页面的按钮列表的页面。Angular2嵌套子路由找不到路由匹配

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

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

当用户点击任何它在页面内的按钮，它守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

我是什么做错了？

来源

2017-02-20 DingDong

子路由不应以斜杠'/'开始。

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：plunker有没有2级子路由解决方案：http://plnkr.co/edit/GJ0KBTIlPoloBr0cbEHS?p=preview

来源

2017-02-20 05:30:30 kdev

好大，这看起来不错。但为什么新页面在旧页面后出现？例如在你的闯入者中，当你点击'信息学'时，信息模块出现在下面。我不想那样，我想清除页面上的所有内容，只显示信息的模块。有任何想法吗？ – DingDong

不确定要了解：您需要一个简单的导航？在这种情况下，你不需要使用儿童路线。 – kdev

您的意思是？ http://plnkr.co/edit/GJ0KBTIlPoloBr0cbEHS?p=preview – kdev

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

回答

相关问题