Angular2嵌套路由不起作用 [英] Angular2 nested routing not working

问题描述

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

I am working on a small trial project with Angular2 where I have a menu and a sub-menu. Hence I need to have some kind of nested routing for sub-menu. I referred to angular.io site in the case study: Tour of heroes section but was not able to implement it successfully.

我的主菜单(导航)具有此路由配置

My main menu(navigation) has this routing configuration

@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>

字母部分将具有子导航，并因此具有子路线.

Letters section will have a sub-navigation and hence child routes.

子菜单(子导航)已配置为

sub-menu(sub-navigation) under letters component has been configured as

@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 ，控制台中出现以下错误，此后一切都无效.

The main menu works and displays the corresponding template except for letters section. When I click on letters option, the corresponding template of sub-menu is loaded but in the address bar I still see http://localhost:3000/contact which I had navigated to before, I get the following error in my console, and thereafter nothing works.

angular2.dev.js:23877错误:组件"AppComponent"没有名为"All"的路由.

angular2.dev.js:23877 Error: Component "AppComponent" has no route named "All".

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

I tried a lot of things that people suggested for similar problems on github and stackoverflow but nothing seems to work.

angular2是否真正支持嵌套路由?我经历了这个线程(路由器巨大的缺陷-不允许嵌套#6204的级别超过1 a>)在github上，但没有帮助.有什么办法可以解决这个问题?

Is nested routing really supported in angular2? I went through this thread (Router Huge Flaw - Does not allow more than 1 level of nesting #6204) on github but didn't help. Is there any way to get around this problem?

推荐答案

考虑到对问题的评论，解决方案是:

Considering comments on the questions, the solution is:

1. 从子组件 LetterComponent 中删除了提供者:[ROUTER_PROVIDERS] .

2. 已更改

1. Removed providers: [ROUTER_PROVIDERS] from the child component LetterComponent which has sub-routes.

2. Changed

<路由器插座名称="letter-outlet"></路由器插座>

到

< router-outlet></router-outlet>

因此最终结构如下:

AppComponent:

@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 (具有子路径的子组件):

LetterComponent(child component that has sub-routes):

@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' }
])

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

这篇关于Angular2嵌套路由不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！