Angular 6.1.9 嵌套路由到命名出口 - “无法匹配任何路由"错误 [英] Angular 6.1.9 nested routing to named outlets - 'Cannot match any routes' error

问题描述

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

I use Angular 6.1.9 with its router module. It seems impossible for me to route/display a named outlet content.

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

When calling <a [routerLink]="['', { outlets: { editArea: ['addRootPartner'] } }]">foo</a> it crashes with:

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

NavigationError(id: 2, url: '/overview/work/allPartners(editArea:addRootPartner)', error: Error: Cannot match any routes. URL Segment: 'addRootPartner')

<小时>

我的应用结构是:

---

My app structure is:

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.

Redirects to the overview which loads the workplace module.

工作场所路由:

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.

Redirects to work which displays the WorkplaceComponent. Then it goes further to child allPartners which displays RootPartnersComponent.

在代码中，我使用了两个 .一个在组件 app 模块中:

In the code I use two <router-outlet>s. One is inside a component app module:

<router-outlet></router-outlet>

第二个在workplace模块中，WorkplaceComponent:

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

<小时>

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

推荐答案

好吧，在这个烂摊子上度过了一夜之后，我找到了解决方案.

Okay, after a night spent with this mess, I found a solution.

首先，当在具有 path: ''...

First, the named outlet child routes don't work when defined under a parent with 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/

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

Second issue was related to the router link. Apparently, you have to specify your parent route as the base of navigation. Thus navigation has to be done programmatically.

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-closure-secondary-router-outlet-views-from-within-the-named-route-view-components-in-angular-4-4-4.htm

超迟

path: '' 的问题可能是由于将此路由配置为第一个造成的.

The issue with path: '' might be caused by configuring this route as the first one.

配置中路由的顺序很重要，这是设计使然.路由器在匹配路由时使用先匹配获胜策略，因此更具体的路由应该放在不太具体的路由之上.在上面的配置中，首先列出具有静态路径的路由，然后是与默认路由匹配的空路径路由.通配符路由排在最后，因为它匹配每个 URL，并且只有在没有其他路由首先匹配时才应该被选中.

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 嵌套路由到命名出口 - “无法匹配任何路由"错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！