兒童級別路線不工作

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. 
*/