Question

我试图了解命名出口在Augular 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',
    },
  ],
},

结果是页面正在加载父组件，并显示问候。没有任何内容显示在命名插座之外。

您应该能够执行此操作似乎合乎逻辑。如果您要使用路由器以外的其他方法，请提出建议，但这似乎是我尝试做的正确方法。

Answer 1

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

是这样的：

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

Answer 2

我最终不得不执行以下操作，这不是我期望的。我希望/想到的是，如果您可以这样定义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语句。

Angular 6使用路由器插座

2 个答案: