儿童级别路线不工作

Question

我的菜单提供商如下

export const routes: RouterConfig = [ 
    { path: '', component: Dashboard1 }, 
    { path: 'Dashboard2', component: Dashboard2 }, 
    { path: 'Report1', component: Report1 }, 
    { path: 'Report2', component: Report1 }, 
    { 
     path: 'ManageRedisCache',    //Child level menus 
     component: ManageRedisCache, 
     children: [ 
      { path: '', component: ExtractorQueue }, 
      { path: 'Extractor', component: Extractor }, 
      { path: 'Schedule', component: Schedule }, 
      { path: 'CacheVisualization', component: CacheVisualization} 
     ] 
    } 
]; 

第一级菜单HTML模板作为加载第二级菜单

<ul> 
        <li class="teamMate"> 
         <a [routerLink]="['/ManageRedisCache']"><h4>Manage Redis Cache</h4></a> 
        </li> 
       </ul> 

ManageRedisCache组件下面的HTML链接有HTML模板如下指定第二级路线

<div class="container"> 
 
    <h2>Redis Administration</h2> 
 
    <ul class="nav nav-tabs"> 
 
     <li class="active"><a data-toggle="tab" [routerLink]="['/']">ExtractorQueue</a></li> 
 
     <li><a data-toggle="tab" [routerLink]="['/Extractor']">Extractor</a></li> 
 
     <li><a data-toggle="tab" [routerLink]="['/Schedule']">Schedule</a></li> 
 
     <li><a data-toggle="tab" [routerLink]="['/CacheVisualization']">Cache Visualization</a></li> 
 
    </ul> 
 
    <div class="tab-content"> 
 
     <router-outlet></router-outlet> 
 
    </div> 
 
</div>

我已经定义了子路由和子级别的默认路由，即ExtractorQueue在加载/点击“ManageRedisCache”链接时工作正常。在第一次加载时，它会加载组件“ExtractorQueue”，但在导航到其他子路由时，如“Extractor，Schedule，CacheVisualization”，它无法正常工作。没有任何其他路由链接像“Extractor，Schedule，CacheVisualization”似乎可以工作，甚至可以点击。 我收到以下错误在浏览器控制台

zone.js:461 Unhandled Promise rejection: Cannot match any routes: 'Extractor' ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot match any routes: 'Extractor' 
    at Observable.eval [as _subscribe] (http://localhost:49928/lib/@angular/router/src/apply_redirects.js:37:34) 
    at Observable.subscribe (http://localhost:49928/lib/rxjs/Observable.js:52:62) 
    at Observable._subscribe (http://localhost:49928/lib/rxjs/Observable.js:109:28) 
    at MergeMapOperator.call (http://localhost:49928/lib/rxjs/operator/mergeMap.js:75:23) 
    at Observable.subscribe (http://localhost:49928/lib/rxjs/Observable.js:52:38) 
    at Observable._subscribe (http://localhost:49928/lib/rxjs/Observable.js:109:28) 
    at MergeMapOperator.call (http://localhost:49928/lib/rxjs/operator/mergeMap.js:75:23) 
    at Observable.subscribe (http://localhost:49928/lib/rxjs/Observable.js:52:38) 
    at Observable._subscribe (http://localhost:49928/lib/rxjs/Observable.js:109:28) 
    at MapOperator.call (http://localhost:49928/lib/rxjs/operator/map.js:54:23)consoleError @ zone.js:461 
zone.js:463 Error: Uncaught (in promise): Error: Cannot match any routes: 'Extractor' 
    at resolvePromise (http://localhost:49928/lib/zone.js/dist/zone.js:538:32) 
    at http://localhost:49928/lib/zone.js/dist/zone.js:515:14 
    at ZoneDelegate.invoke (http://localhost:49928/lib/zone.js/dist/zone.js:323:29) 
    at Object.onInvoke (http://localhost:49928/lib/@angular/core/bundles/core.umd.js:9100:45) 
    at ZoneDelegate.invoke (http://localhost:49928/lib/zone.js/dist/zone.js:322:35) 
    at Zone.run (http://localhost:49928/lib/zone.js/dist/zone.js:216:44) 
    at http://localhost:49928/lib/zone.js/dist/zone.js:571:58 
    at ZoneDelegate.invokeTask (http://localhost:49928/lib/zone.js/dist/zone.js:356:38) 
    at Object.onInvokeTask (http://localhost:49928/lib/@angular/core/bundles/core.umd.js:9091:45) 
    at ZoneDelegate.invokeTask (http://localhost:49928/lib/zone.js/dist/zone.js:355:43) 

Answer 1

路由器链接不应包含子路由斜线开头。

<div class="container"> 
<h2>Redis Administration</h2> 
<ul class="nav nav-tabs"> 
    <li class="active"><a data-toggle="tab" [routerLink]="['./']">ExtractorQueue</a></li> 
    <li><a data-toggle="tab" [routerLink]="['Extractor']">Extractor</a></li> 
    <li><a data-toggle="tab" [routerLink]="['Schedule']">Schedule</a></li> 
    <li><a data-toggle="tab" [routerLink]="['CacheVisualization']">Cache Visualization</a></li> 
</ul> 
<div class="tab-content"> 
    <router-outlet></router-outlet> 
</div> 

的斜线告诉路由器查找从根开始的路线。如果没有前导斜杠（或'./'），路由器会查找以当前组件的子项开始的路线。这不是在官方文档中，您必须仔细阅读代码才能找到该宝石：

/** 
* The RouterLink directive lets you link to specific parts of your app. 
* 
* Consider the following route configuration: 

* ``` 
* [{ path: '/user', component: UserCmp }] 
* ``` 
* 
* When linking to this `User` route, you can write: 
* 
* ``` 
* <a [routerLink]="['/user']">link to user component</a> 
* ``` 
* 
* RouterLink expects the value to be an array of path segments, followed by the params 
* for that level of routing. For instance `['/team', {teamId: 1}, 'user', {userId: 2}]` 
* means that we want to generate a link to `/team;teamId=1/user;userId=2`. 
* 
* The first segment name can be prepended with `/`, `./`, or `../`. 
* If the segment begins with `/`, the router will look up the route from the root of the app. 
* If the segment begins with `./`, or doesn't begin with a slash, the router will 
* instead look in the current component's children for the route. 
* And if the segment begins with `../`, the router will go up one level. 
*/