angular - 如何使命名路由导出与 loadChildren 一起工作？

Question

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

在this例如，按“联系人”链接失败。

app-routing.module

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

admin-routing.module

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

在this例如，按“联系”链接有效。

app-routing.module

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

admin-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 的空路径。根据documentation有一个空路径应该可行。

Answer 1

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

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

在'fails'场景下，路由段''被匹配，redirectTo改变url为'/admin'，路由器匹配路径'/admin'，路由器自动匹配admin-中的空字符串''路由配置，路由完成。在第二个“成功”场景中，路径匹配“”，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 指令的链接参数数组的第一段以指定管理路径，即 <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>