Angular 角度2：让子路由组件替换路由器出口中的父路由组件
是否有办法在父路由的Angular 角度2：让子路由组件替换路由器出口中的父路由组件,angular,Angular,是否有办法在父路由的中显示子路由 例如，假设我们有两条路线： /users/12345 /users/12345/orders/12345 我需要第二个是第一个的孩子，但我也需要用/users/12345/orders/12345的内容完全替换/users/12345/orders/12345的内容，而不是在/users/12345子路由器出口中使用/users/12345/orders/12345 我想我可以通过命名父级路由器出口并使两条路由都以它为目标来实现这一点，但从我所做的研究（以及
/users/12345
/users/12345/orders/12345
/users/12345/orders/12345/users/12345/orders/12345/users/12345路由器出口中使用/users/12345/orders/12345
我想我可以通过命名父级路由器出口并使两条路由都以它为目标来实现这一点，但从我所做的研究（以及它所导致的错误）中，我感觉这些名称是为了在已经存在主路由器出口的情况下进行二次使用的您可以通过如下方式设置路由来实现：
const routes : Routes = [
{
path : 'user/:id',
component : ParentComponent,
children : [
{ path : '', component : UserComponent },
{ path : 'order/:id', component : OrderComponent }
]
}
]
ParentComponent
的模板将只有
来加载其子级。编辑：我提出了一个新的解决方案，该解决方案使用模板指令，允许按层次设置路由，而不是在同一级别设置路由
示例代码/演示可在此处找到：
更新版本（2019年）：
我也有同样的问题。我就是这样修复的：
const routes: Routes = [
{
path: '',
children: [
{
path: '',
component: ParentComponent,
},
{
path: 'child',
component: ChildComponent,
}
]
}
];
如果您需要根据活动的子路由隐藏某些内容（如数据网格或指令面板），您可以简单地使用以下方法：
<div *ngIf="outlet.isActivated == false">
Please select a child route!
</div>
<router-outlet #outlet="outlet"></router-outlet>
请选择子路由！
重要的是要包含引号，因为您正在导出模板变量引用
路由器出口上也有激活和停用的事件
另一种方法是在NavigationEnd
事件发生时，然后决定显示或隐藏什么。对于较简单的情况，第一种方法应该可以很好地工作
我也不认为这与你的问题有关，但你可以用*ngIf
完全隐藏路由器插座
。我的答案呢？这不是你想要的吗？以你的例子来说，问题是当路由器出口中的“order/：id”上出现“OrderComponent”时，如何将“ParentComponent”替换为“OrderComponent”，这是安装程序无法完成的。这是一个绝妙的解决方案！但是，如何导航到与主路线相同的另一条路线？如果两个路由都设置为“component:PageLevelComponent”，并且angular正在重新使用第一个路由中的现有组件，则会导致“无法读取未定义的属性'createEmbeddedView'”错误，我不确定。我敢肯定，我们会遇到同样的问题，一旦我们得到更多的网页，这个问题way@Sean-我用一个包含我当前使用的版本的链接更新了答案-如果你也有一个子路由模块呢？我必须使用相同的结构，但有一个问题。父组件路由实际上是子路由的同级路由。例如，如果您需要解析父组件的某些数据，但同时又将其传递给子组件，则会出现问题。这对我来说很有效，但我有多个部分，希望隐藏/显示它们。隐藏/显示基本上在父组件和子组件之间来回切换。我有父母（第1、2和3节）。然而，当第1节加载子组件时，父组件的第1节将隐藏，正如您所说的。现在我需要对第2节和第3节做同样的事情。现在我看到第1部分受到第2部分的影响，因为出口很常见。有办法解决这个问题吗？感谢此解决方案存在一些棘手的问题，因为如果在UsersComponent
中提供了特定于组件的服务，例如UserService
，它将不可用于OrdersComponent
，因为它不是UsersComponent
的子组件。
<div *ngIf="outlet.isActivated == false">
Please select a child route!
</div>
<router-outlet #outlet="outlet"></router-outlet>