Angular 2:让子路由组件替换路由器插座中的Parent

Question

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

例如,假设我们有两条路线:

/users/12345

/users/12345/orders/12345

我还需要第二次是第一个孩子,但我也需要完全替代的内容/users/12345一致的内容/users/12345/orders/12345不是让/users/12345/orders/12345在/users/12345子router-outlet.

我以为我可以通过命名父级路由器来实现这一点,并且两条路由都以它为目标,但是从我一直在做的研究(以及它引起的错误)我感觉这些名称是用于二次使用时已经存在一个主路由器插座

Answer 1

我遇到过同样的问题.这就是我修复它的方法:

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

Answer 2

您可以通过设置这样的路线来实现:

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

ParentComponent的模板将只<router-outlet>加载其子项.

Answer 3

如果您需要根据子路由处于活动状态来隐藏某些东西（例如数据网格或指令面板），则可以使用以下命令：

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

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

#outlet="outlet"将引号包括在内非常重要，因为您正在导出模板变量引用。

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

一种替代方法是在事件发生时获取子路由NavigationEnd，然后决定要显示或隐藏的内容。对于较简单的情况，第一种方法应该可以正常工作。

另外不相关的问题，我不觉得，但是你可以完全隐藏router-outlet有*ngIf，你会什么都重要。

Answer 4

编辑：我提出了一个围绕使用模板指令的新解决方案，该指令允许设置与同一级别相对的分层路由。

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

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