如何使用角5为同一路径使用两个路由器端口
如何使用角5为同一路径使用两个路由器端口
提问于 2018-02-16 17:00:41
我有下面的AppComponent模板
<div>
<div>
<router-outlet name="menu"></router-outlet>
</div>
<div>
<router-outlet name="main"></router-outlet>
</div>
</div>我想在两种情况下使用这个模板：
- 当我导航到
/page1时，我希望menu出口包含Menu1Component，main出口包含Main1Component - 当我导航到
/page2时，我希望menu出口包含Menu2Component，main出口包含Main2Component
我不明白孩子们和点名店是怎么工作的。在模块导入中，我的路线应该是什么？
我用的是角5。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-02-16 17:22:00
总的方法是在您想要的路由上进行模式匹配，并为每个出口提供空子路由。
格式(带括号、大括号和缩进)看上去有点棘手，所以我将在这里隔离每条路线，并解释一下.
假设你在/page1
const pageOneRoutes = {
path: 'page1',
};该路径有两个子路由(每个出口都有自己的子路由)。这两个子路径都是“空”路径，因为您希望您的子路径本身与page1匹配：
const pageOneRoutes = {
path: 'page1',
children: [
{ path: '', outlet: 'menu', component: Menu1Component },
{ path: '', outlet: 'main', component: Main1Component }
]
};然后，您只需对/page2和要加载的其他组件重复此过程。
const pageTwoRoutes = {
path: 'page2',
children: [
{ path: '', outlet: 'menu', component: Menu2Component },
{ path: '', outlet: 'main', component: Main2Component }
]
};有关更多信息，请参阅角路由教程的这一部分，该部分使用此方法进行子路由中的模式匹配：https://angular.io/guide/router#child-route-configuration。
整件事看起来可能是这样的：
const ROUTES: Routes = [
{
outlet: 'primary',
path: '',
children: [
{
path: 'page1',
children: [
{
path: '',
outlet: 'menu',
component: Menu1Component
},
{
path: '',
outlet: 'main',
component: Main1Component
}
},
{
path: 'page2',
children: [
{
path: '',
outlet: 'menu',
component: Menu2Component
},
{
path: '',
outlet: 'main',
component: Main2Component
}
]
}
]
]
}
]页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48831583
复制相关文章
相似问题
腾讯云开发者
