如何使用 Angular 5 为同一路径使用两个路由器插座
How to use two router outlets for same path using Angular 5
我有以下 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
我不明白 children 和命名网点是如何工作的。
我在模块导入中的路由应该是什么?
我用Angular5.
总体方法是在您想要的路线上进行模式匹配,并为每个出口提供空的子路线。
格式(带方括号、花括号和缩进)乍一看有点棘手,所以我将在这里隔离每条路线并稍微解释一下...
假设您在 /page1
:
const pageOneRoutes = {
path: 'page1',
};
此路径有两条子路由(每个出口都有自己的子路由)。这两个子路径都是 "empty" 路径,因为您希望子路径本身匹配 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 }
]
};
有关更多信息,请查看 Angular 的路由教程的这一部分,它使用这种方法在子路由中进行模式匹配: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
}
]
}
]
]
}
]
我有以下 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
我不明白 children 和命名网点是如何工作的。 我在模块导入中的路由应该是什么?
我用Angular5.
总体方法是在您想要的路线上进行模式匹配,并为每个出口提供空的子路线。
格式(带方括号、花括号和缩进)乍一看有点棘手,所以我将在这里隔离每条路线并稍微解释一下...
假设您在 /page1
:
const pageOneRoutes = {
path: 'page1',
};
此路径有两条子路由(每个出口都有自己的子路由)。这两个子路径都是 "empty" 路径,因为您希望子路径本身匹配 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 }
]
};
有关更多信息,请查看 Angular 的路由教程的这一部分,它使用这种方法在子路由中进行模式匹配: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
}
]
}
]
]
}
]