Angular 6使用路由器出口
我正在尝试了解命名插座在Augular 6中的工作原理。我希望能够将页面拆分为多个部分，并使该页面根据路由路径配置提供的多个命名插座动态显示不同的内容。我没有看到任何调试信息，也找不到问题所在。
示例：
app.component.html
<!--<app-basic></app-basic> -->
<router-outlet></router-outlet>
<h1>hello</h1>
<router-outlet name="sidebar"></router-outlet>路由器模块I具有以下功能：
{
path: 'schedule-inspection',
component: ScheduleInspectionComponent,
children:
[
{
path: 'add',
component: SidebarScheduleInspectionComponent,
outlet: 'sidebar',
},
],
},结果是页面正在加载父组件，并显示hello。没有内容显示在指定的插座之外。
你应该能够做到这一点似乎是合乎逻辑的。如果您在这里除了使用路由器之外还有其他方法，请告诉我，但它似乎是我正在尝试做的正确的方法。
回答 2
Stack Overflow用户
发布于 2018-07-28 13:15:02
看起来您混合了子路由和辅助(已命名)路由。您不能使用children属性定义辅助路由。另请参阅此帖子：Child Routing for Angular 5 not working properly
所以就像这样：
{
path: 'schedule-inspection',
component: ScheduleInspectionComponent
},
{
path: 'add',
component: SidebarScheduleInspectionComponent,
outlet: 'sidebar',
},Stack Overflow用户
发布于 2018-07-28 17:58:29
我最终不得不执行以下操作，这并不是我所期望的。我希望/想，如果你能定义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- content sidebar的路径，并显示主要内容。如果有更好的方法，请让我知道。
我希望能够转到/schedule-inspection，并且因为它有一个指定的路由器出口，所以它能够根据它的定义定位和显示该内容。最终用户永远不会直接转到计划-检查-侧边栏。
作为一种变通办法，我想我可以将逻辑构建到侧边栏组件中，直到显示哪个组件而不使用路由器插座。我在想，路由器可以管理该功能，而不是使用if语句。
https://stackoverflow.com/questions/51567658
复制相似问题
腾讯云开发者
