[英]How can I link to a route to two components in Angular 2+?
My application looks like (a bit simplistic): 我的应用程序看起来像(有点简单):
<root-component>
<div id="header>
<header-component>
Here are top menu items and some block (cashbox and etc).
Depend on the route.
Frequently one header component can be shown on many routes.
</header-component>
<right-menu-component>
Here is right menu (in the right corner). Did not depend on route, always shown.
</right-menu-component>
</div>
<div id="content">
<content-component>
Here are all content, business logic. Depend on route.
</content-component>
</div>
</root-component>
About how I see the solution (it doesn't work) 关于我如何看待解决方案(无效)
const routes: Routes = [
{ path: 'orders', components:
[
{selector: 'header-component', component: 'OrdersHeader'},
{selector: 'content-component', component: 'OrdersComponent'}
]
},
{ path: 'order-editor', components:
[
{selector: 'header-component', component: 'OrdersHeader'},
{selector: 'content-component', component: 'OrderEditorComponent'}
]
},
{ path: 'some-report', components:
[
{selector: 'header-component', component: 'ReportsHeader'},
{selector: 'content-component', component: 'ReportsComponent'}
]
}...
I want to link to header and content components to one route. 我想将标题和内容组件链接到一条路由。 I cannot put one into the other because between them is right menu and because the layout will be break.
我不能将两者放在一起,因为它们之间是正确的菜单,并且布局会中断。
How to solve this problem? 如何解决这个问题呢?
You can use a named outlet to change header and content routes independently of each other, eg content as default (unnamed) outlet and header in a named outlet: 您可以使用命名的插座来彼此独立地更改标题和内容路由,例如,内容(默认(未命名)插座)和标题中的标题:
<router-outlet name="header"></router-outlet>
^^^^^^
const routes: Routes = [
{
...
{ path: 'header-a', component: HeaderAComponent, outlet: 'header' },
^^^^^^
}
For further information, see the docs: Displaying multiple routes in named outlets 有关更多信息,请参阅文档: 在命名插座中显示多条路线
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.