如何使命名路由出口与 loadChildren 一起工作？

我创建了两个关于路由的 loadChildren 和出口导航问题的插件。由于某种原因，加载的子模块中具有空的基本路径不适用于出口导航。

In this https://plnkr.co/edit/ps0ZiD3mHTte227Ws69T?p=preview例如，按“联系”链接失败。

应用程序路由模块

const appRoutes: Routes = [
  { path: 'admin', loadChildren: () => AdminModule },
  { path: '',   redirectTo: '/admin', pathMatch: 'full' }
];

管理路由模块

const adminRoutes: Routes = [
{ 
  path: '', 
  component: AdminComponent,
  children: [ 
    {
      path: 'compose',
      component: ComposeMessageComponent,
      outlet: 'popup'
    }
  ]
}];

In this https://plnkr.co/edit/HrsFvUuPgo9KvlDQJ9uk?p=preview例如，按“联系”链接即可。

应用程序路由模块

const appRoutes: Routes = [
  { path: 'admi', loadChildren: () => AdminModule },
  { path: '',   redirectTo: '/admi/n', pathMatch: 'full' }
];

管理路由模块

const adminRoutes: Routes = [
{ 
  path: 'n', 
  component: AdminComponent,
  children: [ 
    {
      path: 'compose',
      component: ComposeMessageComponent,
      outlet: 'popup'
    }
  ]
}];

区别在于 app-routing.module 和 admin-routing.module。该工作示例没有 admin-routing.module 的空路径。 根据文档 https://angular.io/docs/ts/latest/guide/router.html#!#asynchronous-routing有一个空路径应该可以。

“Contact”的 routerLink 指令的链接参数数组的第一段是指包含 routerLink 的组件模板的父路由和相应的 router-outlet。您需要将指定路由器出口的路由配置放置在应用程序路由配置中，而不是“失败”场景的管理路由配置中，但这可能是不可取的，因为与其他原则之间的关注点分离。

您提供的第一个示例“失败”和第二个示例“有效”之间的区别在于，路由配置中的角度路由器redirectTo在路由模式匹配期间“回溯”的方式；然而，第二个关键方面是作为匹配结果评估的行为不应该影响路由的模式匹配的行为。

在“失败”场景中，路由段“”被匹配，redirectTo将url更改为“/admin”，路由器匹配路径“/admin”，路由器自动匹配admin-routing配置中的空字符串“”，路由完成。在第二个“成功”场景中，路径匹配“”，redirectTo匹配第一段“/admi”，路由器评估url的第二段“/n”，因为路由尚未完成，路由器在app-routing 配置匹配 '/n' 并且没有找到任何匹配项，然后评估 admin-routing 配置并匹配第二段 '/n'，路由器自动匹配空字符串 '' 路由完成。 “失败”场景问题是链接参数数组<a [routerLink]="[{ outlets: {popup: ['compose']}}]">Contact</a>是一个空字符串，并且 url 当前为“/admin”。是的，关键区别在于路由器自动评估的空“”字符串在层次结构中出现的位置，换句话说，路由器评估路由配置完成的位置。这很微妙，但在“失败”场景中评估的空字符串在顶层 AdminComponent 完成；因此，路由器模式匹配回溯会自动在父路由“admin”处查找空字符串“”，这是应用程序路由路由配置中的“redirectTo”的结果。在第二个“成功”场景中，路由器对路由配置的评估在父“/n”的子路径“”处完成，与管理路由路由配置“失败”场景相比，该子路径在层次结构中处于较低级别；因此，在第二个“成功”场景中，当<a [routerLink]="['', { outlets: {popup: ['compose']}}]">Contact</a>被点击。

为了修复“失败”场景路由配置，您需要修改 Contact routerLink 指令的 links 参数数组的第一段以指定管理路径，即<a [routerLink]="['/admin', { outlets: {popup: ['compose']}}]">Contact</a>，或修改由路由器完成自动评估的空字符串 '' 路径出现的层次结构。

要通过修改路由配置层次结构来“修复”由路由器自动评估的空字符串“路径”的父级，请务必注意，空字符串“路径”的父级不能是空字符串“ ' 小路。在示例中：

const devNavRoutes: Routes = [
  {
    path: '',
    component: DevNavContainerComponent, canActivate: [ DevNavAuthGuard1Service ],
    children: [
      { path: '', canActivateChild: [ DevNavAuthGuard1Service ],
        children: [
          { path: '', redirectTo: 'dashboard' },
          { path: 'dashboard', component: DevNavDashboardComponent,
            children: [
              { path: ':auxiliaryId', component: DevNavAuxiliaryComponent, outlet: 'auxiliary'},
              { path: ':ancillaryId', component: DevNavAncillaryComponent, outlet: 'ancillary' }
            ] },
          { path: ':id', component: DevNavDashboardComponent,
            children: [
              { path: ':auxiliaryId', component: DevNavAuxiliaryComponent, outlet: 'auxiliary'},
              { path: ':ancillaryId', component: DevNavAncillaryComponent, outlet: 'ancillary' }
            ] },
        ] },
    ] } 
];

Note:

// dev-nav-container.component
<router-outlet></router-outlet>

And

// dev-nav-dashboard.component
<router-outlet name="auxiliary"></router-outlet> 
<router-outlet name="ancillary"></router-outlet>