Angular 6.1.9 嵌套路由到命名插座 - “无法匹配任何路由”错误

Question

我使用 Angular 6.1.9 及其路由器模块。我似乎不可能路由/显示命名的出口内容。

调用<a [routerLink]="['', { outlets: { editArea: ['addRootPartner'] } }]">foo</a> 时会崩溃：

NavigationError(id: 2, url: '/overview/work/allPartners(editArea:addRootPartner)', error: Error: 无法匹配任何路由。URL Segment: 'addRootPartner')

---

我的应用结构是：

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。然后它进一步到子allPartners，它显示RootPartnersComponent。

---

在代码中我使用了两个<router-outlet>s。一个在组件app 模块内：

<router-outlet></router-outlet>

第二个在workplace模块中，WorkplaceComponent：

<router-outlet></router-outlet>
<router-outlet name="editArea"></router-outlet>

---

这个设置有什么问题？嵌套命名插座的使用是否有技术限制？

Answer 1

好的，在这个烂摊子上度过了一夜之后，我找到了解决办法。

---

首先，命名的出口子路由在使用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