angular – 如何使用loadChildren使命名路由插座工作？

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

const appRoutes: Routes = [
  { path: 'admi',redirectTo: '/admi/n',pathMatch: 'full' }
];

const adminRoutes: Routes = [
{ 
  path: 'n',outlet: 'popup'
    }
  ]
}];

“Contact”指令的routerLink指令的link parameters数组的第一段是指包含routerLink的组件模板的父路由和相应的router-outlet。您需要在app-routing配置中放置指定路由器插座的路由配置，而不是在’失败’场景中放置admin-routing配置，但由于其他原则之间的关注点分离，这可能是不可取的。

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

在“失败”场景中，路由段”匹配，redirectTo将url更改为’/ admin’，路由器匹配路径’/ admin’，路由器自动匹配admin-routing配置中的空字符串”，路由完成。在第二个“成功”场景中，路径匹配”，redirectTo匹配第一个段’/ admi’，路由器评估url’/ n’的第二个段，因为路由尚未完成，路由器查找匹配’/ n’的app-routing配置并且找不到任何匹配，然后评估admin-routing配置并且第二段’/ n’匹配，路由器自动匹配空字符串”路由完成。 “失败”场景问题是< a [routerLink] =“[{outlets：{popup：['compose']}}]”> Contact< / a>的链接参数数组。是一个空字符串，网址目前是’/ admin’。是的，关键区别在于层次结构中的位置，在该位置，路由器自动评估空的“字符串”，换句话说，路由器配置的路由器评估完成的位置。它很微妙，但在“失败”场景中评估的空字符串在顶层AdminComponent完成;因此，路由器模式匹配回溯在父路由’admin’处自动查找空字符串”，这是app-routing routes config中redirectTo的结果。在第二个“成功”场景中，路由配置的路由器评估在父级’/ n’的子路径”处完成，该子路径在层次结构中低于管理路由路由配置’失败’场景;因此，在第二个“成功”场景中，当< a [routerLink] =“[''，{outlets：{popup'时，自动评估的空字符串不受来自app-routing路由配置的重定向的影响：['compose']}}]“>联系人< / a>点击。

为了修复“失败”场景路由配置，您需要修改Contact routerLink指令的links参数数组的第一段以指定管理路径，即< a [routerLink] =“['/ admin'， {outlets：{popup：['compose']}}]“>联系< / 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',] },] } 
];

注意：

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

和

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