angular2 中的嵌套路由问题

Question

我有一个场景，我需要加载一个使用 angular2 路由构建的菜单。在一个特定的组件中，我需要加载另一个 menus/tabs ，它不过是另一个 angular2 路由组件。请找到我的要求的快照 here

请找到主菜单的代码

import {Component, bind} from 'angular2/core';
import {ROUTER_PROVIDERS, RouteConfig, ROUTER_DIRECTIVES, APP_BASE_HREF, LocationStrategy, RouteParams, ROUTER_BINDINGS} from 'angular2/router';
import {bootstrap}        from 'angular2/platform/browser';

import {ComponentOne} from '../Dashboard/Dashboard1';
import {ComponentTwo} from '../Dashboard/Dashboard2';
import {ReportOne} from '../Reports/Report1';
import {menutopbar} from './menutopbar';
import {leftmenu} from './leftmenu';
import {Clicksenselink} from './clicksenselink';
import {ManageRedisCache} from '../Admin/ManageRedisCache';

@Component({
    selector: 'comp-menu',
    templateUrl: './Menu.html',
    directives: [menutopbar, leftmenu, ManageRedisCache, ROUTER_DIRECTIVES]
   // providers: [ROUTER_PROVIDERS]
})

@RouteConfig([
        { path: '/Dashboard1', name: 'ComponentOne', component: ComponentOne },
        { path: '/Dashboard2', name: 'ComponentTwo', component: ComponentTwo },
        { path: '/Report1', name: 'ReportOne', component: ReportOne },
        { path: '/Clicksenselink', name: 'Clicksenselink', component: Clicksenselink },
        { path: '/ManageRedisCache/...', name: 'ManageRedisCache', component: ManageRedisCache}
])

export class componentmenu {
    constructor() {
        console.log("componentmenu component being called");
    }
}

请查找内部加载另一个路由组件的子组件的代码

import {Component, bind} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES, APP_BASE_HREF, LocationStrategy, RouteParams, ROUTER_BINDINGS, RouterOutlet} from 'angular2/router';
import {bootstrap}        from 'angular2/platform/browser';
import {AfterViewInit} from 'angular2/core';   


import {Extractor} from './Extractor';
import {ExtractorQueue} from './ExtractorQueue';
import {Schedule} from './Schedule';
import {DefaultComponent} from './DefaultComponent';


@Component({
    template: `
<div class="container">
    <h2>Redis Administration</h2>
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" [routerLink]="['Extractor']">Extractor</a></li>
        <li><a data-toggle="tab" [routerLink]="[ 'ExtractorQueue']">ExtractorQueue</a></li>
        <li><a data-toggle="tab"  [routerLink]="['Schedule']">Schedule</a></li>
    </ul>
    <div class="tab-content">
        <router-outlet></router-outlet>
      </div>
</div>
`,
    directives: [Extractor, ExtractorQueue, Schedule, RouterOutlet]
})

    @RouteConfig
        ([
    { path: '/', name: 'Default', component: DefaultComponent},
    { path: '/Extractor', name: 'Extractor', component: Extractor, useAsDefault: true},
    { path: '/ExtractorQueue', name: 'ExtractorQueue', component: ExtractorQueue },
    { path: '/Schedule', name: 'Schedule', component: Schedule }
])

export class ManageRedisCache
{ }

当我运行我的应用程序时，我在 chrome 控制台中收到以下异常

Can't bind to 'routerLink' since it isn't a known native property ("s Administration</h2>
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" [ERROR ->][routerLink]="['Extractor']">Extractor</a></li>
        <li><a data-toggle="tab" [routerLink]="[ 'Ext"): ManageRedisCache@4:48
Can't bind to 'routerLink' since it isn't a known native property (" data-toggle="tab" [routerLink]="['Extractor']">Extractor</a></li>
        <li><a data-toggle="tab" [ERROR ->][routerLink]="[ 'ExtractorQueue']">ExtractorQueue</a></li>
        <li><a data-toggle="tab"  [routerL"): ManageRedisCache@5:33
Can't bind to 'routerLink' since it isn't a known native property ("="tab" [routerLink]="[ 'ExtractorQueue']">ExtractorQueue</a></li>
        <li><a data-toggle="tab"  [ERROR ->][routerLink]="['Schedule']">Schedule</a></li>
    </ul>
    <div class="tab-content">
"): ManageRedisCache@6:34 ; Zone: angular ; Task: Promise.then ; Value: BaseExceptionconsoleError @ code.angularjs.org/2.0.0-beta.16/angular2-polyfills.js:487
code.angularjs.org/2.0.0-beta.16/angular2-polyfills.js:489 Error: Uncaught (in promise): Template parse errors:(…)consoleError @ code.angularjs.org/2.0.0-beta.16/angular2-polyfills.js:489

有什么解决这个问题的想法吗？

Answer 1

你应该更新到 ng2-rc ... 无论如何，阅读更多 https://angular.io/docs/ts/latest/guide/router-deprecated.html

要有嵌套路由，您需要添加 3 个点

{ path: '/ManageRedisCache/...'

并且在 ManageRedisCache 中有一个默认路由

 { path: '/', name: 'default', component: default},

并在 ManageRedisCache

中添加 routeroutlet 指令

angular2 中的嵌套路由问题

Issue in nested routing in angular2

angular2-routing

angular