Angular 6 使用路由器插座答案

【问题标题】：Angular 6 Using router-outletAngular 6 使用路由器插座
【发布时间】：2019-01-05 03:37:44
【问题描述】：

我试图了解命名插座在 8 月 6 日是如何工作的。我希望能够将一个页面分成多个部分，并让该页面根据路由路径配置提供的多个命名插座动态显示不同的内容。我没有看到任何调试信息，也找不到问题所在。

例子：

app.component.html

<!--<app-basic></app-basic> -->
<router-outlet></router-outlet>
<h1>hello</h1>
<router-outlet name="sidebar"></router-outlet>

路由器模块我有以下：

{
  path: 'schedule-inspection',
  component: ScheduleInspectionComponent,
  children: 
  [
    {
      path: 'add',
      component: SidebarScheduleInspectionComponent,
      outlet: 'sidebar',
    },
  ],
},

结果是页面正在加载父组件，并显示 hello。没有内容显示在指定的出口之外。

您应该能够做到这一点似乎是合乎逻辑的。如果您在此处使用路由器以外的其他方法，请告知，但这似乎是我正在尝试做的正确方法。

【问题讨论】：

你在点击 url schedule-inspection/add

标签： angular angular6 router-outlet

【解决方案1】：

我最终不得不执行以下操作，这不是我所期望的。我希望/在想，如果您可以定义 url 的路径，使其知道如何填写其他路由器出口。

Working:

{ path: 'schedule-inspection-sidebar', component: ServiceAreaComponent, outlet:'sidebar' },
{
  path: 'schedule-inspection',
  component: ScheduleInspectionComponent
},
{
    path: 'schedule-inspection(sidebar:schedule-inspection-sidebar)',
    component: SidebarScheduleInspectionComponent,
    outlet: 'sidebar'
},

然后在浏览器中转到 schedule-inspection(sidebar:schedule-inspection-sidebar) 它将查找名为 schedule-inspection-sidebar 的路径并显示主要内容。如果有更好的方法，请告诉我。

我希望能够转到 /schedule-inspection，因为它有一个命名的路由器出口，它可以根据它的定义定位和显示该内容。最终用户永远不会直接访问 schedule-inspection-sidebar。

作为一种解决方法，我想我可以将逻辑构建到侧边栏组件中，以显示要显示的组件而不使用路由器插座。我在想路由器可以管理该功能而不是使用 if 语句。

【讨论】：

【解决方案2】：

您似乎正在混合子路由和辅助（命名）路由。您没有使用 children 属性定义辅助路由。另见这篇文章：Child Routing for Angular 5 not working properly

所以是这样的：

{
  path: 'schedule-inspection',
  component: ScheduleInspectionComponent
 },
 {
  path: 'add',
  component: SidebarScheduleInspectionComponent,
  outlet: 'sidebar',
 },

【讨论】：