Angular 2嵌套导航与新路由器

时间:2016-05-13 20:15:40

标签: typescript angular

如何实现嵌套导航?我用之前的路由器做过这个。

{ path: '/admin/...', component: AdminLayoutComponent }

似乎从rc1 angular2不支持这个。

从文档中。 https://angular.io/docs/ts/latest/guide/router.html

请注意,路径以斜杠和三个尾随句点(/...).

结尾

这意味着这是一条不完整的路线(非终端路线)。完成的路线将是父/危机中心/路线和来自属于指定组件的子路由器的路线的某种组合。

编辑: 这些是我的路线

//AppComponent
@Routes([
    { path: '/admin-login', component: AdminLoginLayoutComponent },
    { path: '/admin', component: AdminLayoutComponent },
    { path: '/edit', component: EditReportLayoutComponent },
    { path: '/', component: WebLayoutComponent },
])

//WebLayoutComponent
@Routes([
    { path: '/details/:id', component: DetailsComponent },
    { path: '/applications', component: ApplicationsComponent },
    { path: '/statistics', component: StatisticsComponent },
    { path: '/addreport', component: NewReportComponent },
    { path: '/register', component: RegisterComponent },
    { path: '/account', component: AccountComponent },
    { path: '/login', component: LoginComponent },
    { path: '/feed', component: AllFeedComponent },
    { path: '/', component: MapComponent }
])

编辑:在plunker http://plnkr.co/edit/4TAd436l91zGX2emsxEF?p=preview

上添加了一个最低限度示例

1 个答案:

答案 0 :(得分:1)

如果您有子路由,只需删除新路由器中不需要的/...即可。新路由器仍存在一些问题,并非所有功能都可用。一个(陷阱是路线的顺序是相关的(将被设计固定)。最具体(最长)的路线应该是第一个,而最后一个路线应该是最后一个(如/,或*