我将Angular 6.1.9及其路由器模块一起使用。我似乎无法路由/显示指定的出口内容。
调用<a [routerLink]="['', { outlets: { editArea: ['addRootPartner'] } }]">foo</a>时，它崩溃并显示：
导航错误(id： 2， url： '/overview/work/allPartners(editArea：addRootPartner('， 错误： 错误： 无法匹配任何路由。URL 段："添加根合作伙伴"(
我的应用结构是：
app.module
app-routing.module
workspace.module
workspace-routing.module
应用路由：
const rootAppRoutes: Routes = [
{ path: '', redirectTo: 'overview', pathMatch: 'full' },
{ path: 'overview', loadChildren: './overview/workplace/workplace.module#WorkplaceModule' },
{ path: '**', component: PageNotFoundComponent }
];
重定向到加载workplace模块的overview。
工作场所路由：
const workplaceRoutes: Routes = [
{ path: '', redirectTo: 'work', pathMatch: 'full'},
{ path: 'work', component: WorkplaceComponent, children: [
{ path: 'allPartners', component: RootPartnersComponent },
{ path: 'childPartners', component: ChildPartnersComponent },
{ path: '', redirectTo: 'allPartners', pathMatch: 'full'}
]},
{ path: 'addRootPartner', component: AddRootPartnerComponent, outlet: 'editArea' }
];
重定向至显示WorkplaceComponent的work。然后它进一步转到显示RootPartnersComponent的子allPartners。
在代码中，我使用两个<router-outlet>。一个是在组件app模块内部：
<router-outlet></router-outlet>
第二个是在workplace模块中，WorkplaceComponent：
<router-outlet></router-outlet>
<router-outlet name="editArea"></router-outlet>
此设置有什么问题？嵌套命名插座的使用是否有技术限制？
好吧，在与这个烂摊子一起度过了一夜之后，我找到了解决方案。
首先，命名的出口子路由在具有path: ''的父路由下定义时不起作用...
// the root redirect due to named outlets not being able to work as children of "path: ''"
{ path: '', redirectTo: 'work', pathMatch: 'full' },
{ path: 'work', component: WorkplaceComponent, children: [
{ path: '', component: RootPartnersComponent, outlet: 'displayArea' },
{ path: 'childPartners', component: ChildPartnersComponent, outlet: 'displayArea' },
// child for edit area outlet
{ path: 'addRootPartner/:id', component: AddRootPartnerComponent, outlet: 'editArea' }
]}
https://blog.angular-university.io/angular-2-router-nested-routes-and-nested-auxiliary-routes-build-a-menu-navigation-system/
第二个问题与路由器链路有关。显然，您必须将父路由指定为导航的基础。因此，导航必须以编程方式完成。
this.router.navigate([
// NOTE: No relative-path navigation is required because we are accessing
// the parent's "activatedRoute" instance. As such, this will be executed
// as if we were doing this in the parent view component.
{
outlets: {
editArea: ['addRootPartner']
}
}
],
{
relativeTo: this.activatedRoute.parent // <--- PARENT activated route.
}
);
https://www.bennadel.com/blog/3351-closing-secondary-router-outlet-views-from-within-the-named-route-view-components-in-angular-4-4-4.htm
超晚编辑：
path: ''问题可能是由于将此路由配置为第一个路由引起的。
配置中路由的顺序很重要，这是设计使然。路由器在匹配路由时使用先匹配获胜策略，因此更具体的路由应放在不太具体的路由之上。在上面的配置中，首先列出具有静态路径的路由，然后列出与默认路由匹配的空路径路由。通配符路由排在最后，因为它与每个 URL 匹配，并且仅当没有其他路由首先匹配时才应选择通配符路由。
angular.io/guide/router