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和stackoverflow上提出类似问题的建议，但似乎没什么用。

angular2中是否真的支持嵌套路由？我在github上浏览了这个帖子（Router Huge Flaw - Does not allow more than 1 level of nesting #6204），但没有帮助。有没有办法解决这个问题？

Answer 1

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

有关详细信息，请参阅此问题：

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

修改

根据您的错误，您忘记在All类的路线定义中定义名为AppComponent的路线。

Angular2嵌套路由不起作用

1 个答案: