[英]Angular 2: Have Child Route Component Replace Parent in router-outlet
Is there a way to display a child route in the parent route's <router-outlet>
? 有没有办法在父路由的
<router-outlet>
显示子路由?
For example, let's say we have two routes: 例如,假设我们有两条路线:
/users/12345
/users/12345/orders/12345
I need the second to be a child of the first, but I also need to completely replace the contents of /users/12345
with the contents of /users/12345/orders/12345
opposed to having /users/12345/orders/12345
in the /users/12345
sub router-outlet
. 我需要第二个是第一个的孩子,但我还需要完全用
/users/12345/orders/12345
的内容替换/users/12345
的内容,而不是/users/12345/orders/12345
in /users/12345
子router-outlet
。
I thought I could do this by just naming the parent level router-outlet and have both routes target it, but from the research I've been doing (and the errors it caused) I get the feeling the names were intended for secondary uses when there already exists a primary router-outlet 我以为我可以通过命名父级路由器来实现这一点,并且两条路由都以它为目标,但是从我一直在做的研究(以及它引起的错误)我感觉这些名称是用于二次使用时已经存在一个主路由器插座
I had the same issue. 我遇到过同样的问题。 This is how I fixed it:
这就是我修复它的方法:
const routes: Routes = [
{
path: '',
children: [
{
path: '',
component: ParentComponent,
},
{
path: 'child',
component: ChildComponent,
}
]
}
];
You can do it by setting your routes like this : 您可以通过设置这样的路线来实现:
const routes : Routes = [
{
path : 'user/:id',
component : ParentComponent,
children : [
{ path : '', component : UserComponent },
{ path : 'order/:id', component : OrderComponent }
]
}
]
ParentComponent
's template will have only the <router-outlet>
to load its children. ParentComponent
的模板将只有<router-outlet>
来加载其子项。
If you need to hide something (like a datagrid, or instruction panel) based upon a child route being active you can simply use this: 如果您需要根据活动的子路由隐藏某些内容(如数据网格或指令面板),您可以使用以下命令:
<div *ngIf="outlet.isActivated == false">
Please select a child route!
</div>
<router-outlet #outlet="outlet"></router-outlet>
It is important to include #outlet="outlet"
with the quotes because you're exporting a template variable reference. 将
#outlet="outlet"
包含在引号中非常重要,因为您要导出模板变量引用。
There are also events on router-outlet
for activation and deactivation. router-outlet
用于激活和停用的事件。
An alternative is to get the child route when the NavigationEnd
event occurs, and then make decisions what to show or hide. 另一种方法是在
NavigationEnd
事件发生时获取子路由 ,然后决定要显示或隐藏的内容。 For simpler cases the first approach should work fine. 对于更简单的情况,第一种方法应该工作正常。
Also not relevant to your question I don't think, but you can completely hide a router-outlet
with an *ngIf
as you would anything else. 也与你的问题无关,我不认为,但你可以像其他任何东西一样完全隐藏带有
*ngIf
的router-outlet
。
edit : I've come up with a new solution revolving around using template directives that allows for setting up routes hierarchically opposed to at the same level. 编辑 :我提出了一个新的解决方案,围绕使用模板指令,允许设置层次上相对于同一级别的路由。
The sample code/demo can be found here: https://stackblitz.com/edit/angular-routing-page-layout 示例代码/演示可以在这里找到: https : //stackblitz.com/edit/angular-routing-page-layout
Updated version (2019): https://stackblitz.com/edit/angular-routing-page-layout-cnjpz8 更新版本(2019年): https : //stackblitz.com/edit/angular-routing-page-layout-cnjpz8
let routes = [
{
path: 'users/:id',
component: UsersComponent
},
{
path: 'users/:id/orders/:id',
component: OrdersComponent
}
];
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.