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的{{1}}。然后它进一步显示到子WorkplaceComponent，其中显示allPartners。

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

app

第二个是在<router-outlet></router-outlet>模块的workplace中：

WorkplaceComponent

此设置有什么问题？嵌套命名网点的使用有技术限制吗？

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

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

angular.io/guide/router

Angular 6.1.9嵌套到命名插座的路由-“无法匹配任何路由”错误

1 个答案: