Angular2嵌套路由不起作用

Question

我正在使用 Angular2 进行一个小型试验项目，其中有一个 菜单 和一个 子菜单。因此，我需要为子菜单设置某种嵌套路由。我在案例研究：英雄之旅部分提到了 angular.io 网站，但未能成功实施。

我的主菜单（导航）有这个路由配置

@RouteConfig([
    { path: '/letter/...', name: 'Letter', component: LetterComponent },
    { path: '/contact', name: 'Contact', component: ContactsComponent },
    { path: '/notes', name: 'Notes', component: NotesComponent }
])

在 UI（模板）中用作

<ul class="sidebar-nav">
    <li id="menu-title-li">
         <div id="menu-title" class="noselect">MENU</div>
    </li>
    <li>
        <a [routerLink]="['Contacts']">Contacts</a>
    </li>
    <li>
        <a [routerLink]="['/Letter','All']">Letters</a>
    </li>
    <li>
        <a [routerLink]="['Notes']">Notes</a>
    </li>
</ul>
<router-outlet></router-outlet>

字母部分将有一个子导航，因此有子路线。

字母组件下的子菜单（子导航）已配置为

@Component({
    selector: 'letter',
    templateUrl: './app/Letter/template.html',
    directives: [RouterOutlet, ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS]
})

@RouteConfig([
    { path: '/all', component: AlllettersComponent, name: 'All' , useAsDefault: true},
    { path: '/inwards', component: InwardsComponent, name: 'Inwards' },
    { path: '/outwards', component: OutwardsComponent, name: 'Outwards' }
])

在 UI（模板）中用作

<ul class="nav nav-tabs">
    <li role="presentation">
        <a [routerLink]="['All']">All</a>
    </li>
    <li role="presentation">
        <a [routerLink]="['Inwards']">Inwards</a>
    </li>
    <li role="presentation">
        <a [routerLink]="['Outwards']">Outwards</a>
    </li>
</ul>
<router-outlet name="letter-outlet"></router-outlet>

主菜单工作并显示除字母部分之外的相应模板。当我点击字母选项时，子菜单的相应模板已加载，但在地址栏中我仍然看到我之前导航到的http://localhost:3000/contact，我在控制台中收到以下错误，此后没有任何效果。

angular2.dev.js:23877 错误：组件“AppComponent”没有名为“All”的路由。

我尝试了很多人们在 github 和 * 上针对类似问题提出的建议，但似乎没有任何效果。

angular2 真的支持嵌套路由吗？我在 github 上浏览了这个线程 (Router Huge Flaw - Does not allow more than 1 level of nesting #6204) 但没有帮助。有什么办法可以解决这个问题吗？

Answer 1

考虑到cmets上的问题，解决方法是：

1. 从具有子路由的子组件 LetterComponent 中删除了 providers: [ROUTER_PROVIDERS]。

2. 改变了

   <router-outlet name="letter-outlet"></router-outlet>

   到

   <router-outlet></router-outlet>

因此最终的结构是这样的：

应用组件：

@Component({
    selector: 'my-app',
    templateUrl: `
        <ul class="sidebar-nav">
            <li id="menu-title-li">
                <div id="menu-title" class="noselect">MENU</div>
            </li>
            <li>
                <a [routerLink]="['Contacts']">Contacts</a>
            </li>
            <li>
                <a [routerLink]="['/Letter','All']">Letters</a>
            </li>
            <li>
                <a [routerLink]="['Notes']">Notes</a>
            </li>
        </ul>
        <router-outlet></router-outlet>
    `,
    directives: [
        ROUTER_DIRECTIVES
    ],
    providers: [
        ROUTER_PROVIDERS
    ]
})

@RouteConfig([
    { path: '/letter/...', name: 'Letter', component: LetterComponent },
    { path: '/contact', name: 'Contact', component: ContactsComponent },
    { path: '/notes', name: 'Notes', component: NotesComponent }
])

LetterComponent（有子路由的子组件）：

@Component({
    selector: 'letter',
    templateUrl: `
        <ul class="nav nav-tabs">
            <li role="presentation">
                <a [routerLink]="['All']">All</a>
            </li>
            <li role="presentation">
                <a [routerLink]="['Inwards']">Inwards</a>
            </li>
            <li role="presentation">
                <a [routerLink]="['Outwards']">Outwards</a>
            </li>
        </ul>
        <router-outlet></router-outlet>
    `,
    directives: [RouterOutlet, ROUTER_DIRECTIVES]
})

@RouteConfig([
    { path: '/all', component: AlllettersComponent, name: 'All' , useAsDefault: true},
    { path: '/inwards', component: InwardsComponent, name: 'Inwards' },
    { path: '/outwards', component: OutwardsComponent, name: 'Outwards' }
])

回答我自己的问题，遇到同样问题的人可能会觉得有用

Answer 2

事实上，在使用路由时，您需要在为应用程序引导的组件中定义路由。在其他组件中定义子路由没有问题。

查看这个问题了解更多详情：

• Angular 2 : defining a Router on another Component than the bootstraped one

编辑

由于您的错误，您忘记在 AppComponent 类的路由定义中定义名为 All 的路由。