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模板，作为以下html链接加载第二级菜单

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

ManageRedisCache组件具有如下所示的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.
 */

子级别路由无效

1 个答案: