在与父路由器相同的路由器插座中使用子路由
问题描述:
我希望能够对某些路由使用相同的路由器插座。在与父路由器相同的路由器插座中使用子路由
路由设置(简化):
export const routes: Routes = [
{
path: 'app', component: AppComponent,
children: [
path: 'category/:id', component: CategoryComponent,
children: [
{ path: 'post/:id', component: PostComponent }
]
]
}
];
例如,我们有以下路径:
/app/category/1/post/1
即破裂成
/app - AppComponent
|_ /catory/1 - CategoryComponent
|_/post/1 - PostComponent
的AppComponent
具有<router-outlet>
这使得CategoryComponent
, 但也应该在该路线处于活动状态时呈现PostComponent
。
对这类问题的回答常见:
移动子路由,并将它们添加应用程序路由儿童阵列
号这是不正确的做法。我们仍然需要我们的路线层次结构。 CategoryComponent
可能知道PostComponent
没有的东西 - 比如Breadcrumb
命名
所以我们还是希望我们的CategoryComponent加载。 (即使它的观点是不渲染)
使用<router-outlet>
内的CategoryComponent
号的CategoryComponent
不应该负责它自己的<router-outlet>
的。 PostComponent
应代替CategoryComponent
呈现,并添加CSS以将其放置为非法。
我该如何实现这种行为?
我需要写我自己的路由器插座吗?
这会在Angular4中解决吗?
欢迎任何提示!谢谢
答
如果我说得对,可以尝试使用类似“包装器”的方法来解决问题。这样(我没有测试过这个代码,但它应该可以工作;阅读内嵌评论):
export const routes: Routes = [
{
path: 'app',
component: AppComponent,
children: [
{
path: 'category/:id', // app/category/:id/
children: [
{
path: '', // app/category/:id/ => By default, empty paths serve as if they were the parent path.
component: CategoryComponent,
children: [ // These children will be inside the <router-outlet> of the CategoryComponent.
{
path: 'subcategory1', // app/category/:id/subcategory1
component: PostComponent,
},
{
path: 'subcategory2', // app/category/:id/subcategory2
component: PostComponent,
}
]
},
{ // The PostComponent will use AppComponent as its parent; will be loading inside the <router-outlet> of AppComponent.
path: 'post/:id', // app/category/:id/post/:id
component: PostComponent
}
]
}
],
},
];
我有完全相同的问题。你有没有想出一个解决方案或解决方法? – Kersch
@Kersch对不起,我没有任何新东西。 –
这里同样的问题。我不明白为什么它不支持角度,因为很多网站都是这样工作的! – Sonne