Angular 2：让子路由组件替换路由器出口中的父级答案

【问题标题】：Angular 2: Have Child Route Component Replace Parent in router-outletAngular 2：让子路由组件替换路由器出口中的父级
【发布时间】：2017-08-08 02:14:45
【问题描述】：

有没有办法在父路由的<router-outlet> 中显示子路由？

例如，假设我们有两条路线：

/users/12345

/users/12345/orders/12345

我需要第二个成为第一个的孩子，但我还需要将/users/12345 的内容完全替换为/users/12345/orders/12345 的内容，而不是在/users/12345 子router-outlet 中有/users/12345/orders/12345 .

我认为我可以通过命名父级路由器插座并让两条路由都以它为目标来做到这一点，但从我一直在做的研究（以及它引起的错误）中，我觉得这些名称是为了已存在主要路由器插座时的次要用途

【问题讨论】：

标签： angular

【解决方案1】：

我有同样的问题。这就是我修复它的方法：

const routes: Routes = [
   {
    path: '',
    children: [
         {
           path: '',
           component: ParentComponent,
         },
         {
           path: 'child',
           component: ChildComponent,
         }
     ]
   }
];

【讨论】：

如果你也有一个子路由模块怎么办？
我有相同的结构，但有一个问题。父组件路由实际上是子路由的兄弟。例如，如果您需要为父组件解析一些数据但还要将其传递给子组件，这会产生问题。

【解决方案2】：

你可以通过这样设置你的路线来做到这一点：

const routes : Routes = [
  { 
    path : 'user/:id',
    component : ParentComponent,
    children : [
      { path : '', component : UserComponent },
      { path : 'order/:id', component : OrderComponent }
    ]
  }
]

ParentComponent 的模板将只有 <router-outlet> 来加载其子级。

【讨论】：

【解决方案3】：

如果您需要根据处于活动状态的子路由隐藏某些内容（如数据网格或说明面板），您可以简单地使用：

<div *ngIf="outlet.isActivated == false">
   Please select a child route!
</div>

<router-outlet #outlet="outlet"></router-outlet>

将#outlet="outlet" 包含在引号中很重要，因为您要导出模板变量引用。

router-outlet 上还有用于激活和停用的事件。

当NavigationEnd 事件发生时，替代get the child route，然后决定显示或隐藏什么。对于更简单的情况，第一种方法应该可以正常工作。

我认为也与您的问题无关，但您可以完全隐藏 router-outlet 和 *ngIf，就像其他任何事情一样。

【讨论】：

这对我有用，但我有多个部分，我想隐藏/显示它们。隐藏/显示基本上在父组件和子组件之间来回切换。我有父母（第 1、2 和 3 节）。但是，当第 1 部分加载子组件时，父组件的第 1 部分会像您所说的那样隐藏。现在我需要对第 2 节和第 3 节做同样的事情。现在我看到第 1 节受到 2 的影响，因为插座很常见。有没有解决的办法？谢谢

【解决方案4】：

edit：我提出了一个新的解决方案，它围绕使用模板指令进行，允许在同一级别设置分层路由。

示例代码/演示可以在这里找到：https://stackblitz.com/edit/angular-routing-page-layout

更新版本（2019）： https://stackblitz.com/edit/angular-routing-page-layout-cnjpz8

【讨论】：

我的回答呢？这不是你要找的吗？
使用您的示例，问题是关于如何在路由器插座中的“order/:id”上用“OrderComponent”替换“ParentComponent”，该设置无法完成
嗨，@John。这是一个绝妙的解决方案！但是您如何导航到与主要路线相同级别的另一条路线？会导致“Cannot read property 'createEmbeddedView' of undefined”的错误
如果情况是两个路由都设置了 'component: PageLevelComponent' 并且 angular 正在重新使用第一条路由中的现有组件，我不确定。我敢肯定，一旦我们以这种方式获得更多页面，我们就会遇到同样的问题
@Sean - 我用包含我当前使用的版本的链接更新了答案

【解决方案5】：

 let routes = [
  { 
    path: 'users/:id',
    component: UsersComponent
  },
  {
    path: 'users/:id/orders/:id',
    component: OrdersComponent
  }
 ];

【讨论】：

这个解决方案有一些棘手的问题，因为如果有一个特定于组件的服务，比如UsersComponent 中提供的UserService，那么OrdersComponent 将无法使用它，因为它不是UsersComponent 的孩子。