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

Question

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

调用 <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 }
];

重定向到加载 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>

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

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/

第二个问题与路由器有关link。显然，您必须将父路由指定为导航的基础。因此导航必须以编程方式完成。

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

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

Angular 6.1.9 nested routing to named outlets - 'Cannot match any routes' error

router

angular

angular6