如何使命名路由插座与loadChildren一起使用？

Question

我创建了两个关于路由的loadChildren和outlet导航问题的掠夺者.出于某种原因,在加载的子模块中具有空基本路径不适用于出口导航.

在此示例中,按"联系人"链接失败.

APP-routing.module

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

管理员-routing.module

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

在此示例中,按"联系人"链接可以正常工作.

APP-routing.module

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

管理员-routing.module

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

不同之处在于app-routing.module和admin-routing.module.该工作示例没有admin-routing.module的空路径.根据具有空路径的文档应该工作.

Answer 1

“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' }
            ] },
        ] },
    ] } 
];

笔记：

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

和

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