时间戳

首页 > 解决方案 > Angular 6.1.9 嵌套路由到命名出口 - “无法匹配任何路由”错误

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

问题描述

我使用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显示的 child RootPartnersComponent。

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

<router-outlet></router-outlet>

第二个在workplace模块中，WorkplaceComponent：

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

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

标签： angularangular6router

解决方案

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

首先，命名的出口子路由在父级下定义时不起作用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-closure-secondary-router-outlet-views-from-within-the-named-route-view-components-in-angular-4-4-4.htm

超晚编辑：

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

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

angular.io/guide/router

推荐阅读