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）'，错误：错误：无法匹配任何路由。URL段：'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 }
];

重定向到overview加载workplace模块的。

工作场所路由：

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' }
];

重定向到work显示WorkplaceComponent。然后进入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-with-in-the-named-route-view-components-in-angular-4-4-4.htm

超级后期编辑：

问题path: ''可能是由于将此路由配置为第一个路由引起的。

路由在配置中的顺序很重要，这是设计使然。路由器在匹配路由时会使用“先赢”策略，因此应将更具体的路由放在不那么具体的路由之上。在上面的配置中，首先列出具有静态路径的路由，然后是与默认路由匹配的空路径路由。通配符路由排在最后，因为它与每个URL匹配，并且仅当没有其他路由最先匹配时才应选择通配符路由。

angular.io/指南/路由器