Angular 6.1.9 嵌套路由到命名导出 - 'Cannot match any routes' 错误

Question

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

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

NavigationError(id: 2, url: '/overview/work/allPartners(editArea:addRootPartner)', error: Error: Cannot match any routes. 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 }
];

重定向到 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 .然后它更进一步到 child allPartners显示 RootPartnersComponent .

---

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

<router-outlet></router-outlet>

第二个在 workplace 中模块，WorkplaceComponent :

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

---

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

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: '' 的问题可能是由于将此路由配置为第一个路由导致的。

The order of the routes in the configuration matters and this is by design. The router uses a first-match wins strategy when matching routes, so more specific routes should be placed above less specific routes. In the configuration above, routes with a static path are listed first, followed by an empty path route, that matches the default route. The wildcard route comes last because it matches every URL and should be selected only if no other routes are matched first.

angular.io/guide/router