如何使命名路由出口与 loadChildren 一起使用? [英] How to make a named routing outlet work with loadChildren?

问题描述

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

I've created two plunkers concerning an issue with routing's loadChildren and outlet navigation. For some reason, having an empty base path within the loaded child module does not work with outlet navigation.

在这个示例中，按联系"链接失败.

In this example, pressing the 'Contact' link fails.

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

在这个示例中，按联系"链接有效.

In this example, pressing the 'Contact' link works.

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 有一个空路径应该工作.

The difference is in the app-routing.module and the admin-routing.module. The working example doesn't have an empty path for the admin-routing.module. According to the documentation having an empty path should work.

推荐答案

Contact"的 routerLink 指令的链接参数数组的第一段是指包含组件模板的父路由和相应的路由器出口路由器链接.您需要将命名路由器出口的路由配置放置在 app-routing 配置中，而不是失败"场景的管理路由配置中，但这可能是不可取的，因为将关注点与其他原则分开.

The first segment of the link parameters array of your the routerLink directive for "Contact" refers to the parent route and corresponding router-outlet for the component template containing the routerLink. You would need to place the route config for the named router-outlet in the app-routing config instead of the admin-routing config for the 'fails' scenario, but this is likely undesirable due to separation of concerns amongst other principles.

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

The difference between the first example you provided that 'fails' and the second example that 'works' lies in the way in which the angular router redirectTo in the route config "backtracks" during pattern matching of routes; however, the second key aspect is the behavior that is evaluated as a result of matching should not affect the behavior of pattern matching of the route.

在'fails'场景下，匹配到路由段''，redirectTo将url改为'/admin'，路由器匹配路径'/admin'，路由器自动匹配admin-路由配置，路由完成.在第二个'success'场景中，路径匹配''，redirectTo匹配第一个段'/admi'，路由器评估url'/n'的第二个段，因为路由还没有完成，路由器在app-routing config 匹配 '/n' 并且没有找到任何匹配项，然后评估 admin-routing 配置并匹配第二个段 '/n'，路由器自动匹配空字符串 '' 路由完成.'fails' 场景问题是 Contact</a> 的链接参数数组code> 是一个空字符串，url 当前是/admin".是的，关键区别在于路由器自动评估的空 '' 字符串出现在层次结构中的位置，换句话说，路由配置的路由器评估完成的位置.这很微妙，但在失败"场景中评估的空字符串在顶级 AdminComponent 中完成；因此，路由模式匹配回溯会自动在父路由 'admin' 上查找空字符串 ''，这是 app-routing 路由配置中的 redirectTo 的结果.在第二个 'success' 场景中，路由配置的路由器评估在父 '/n' 的子路径 '' 完成，与管理员路由路由配置 'fails' 场景相比，它在层次结构中的级别较低；因此，在第二个成功"场景中，当 被点击.

In the 'fails' scenario, the route segment '' is matched, redirectTo changes the url to '/admin', the router matches the path '/admin', the router automatically matches empty string '' in the admin-routing config, routing is complete. In the second 'success' scenario, the path is matched '', redirectTo matches the first segment '/admi', the router evaluates the second segment of the url '/n' as routing is not complete yet, the router looks in the app-routing config for matches '/n' and doesn't find any matches, the admin-routing config is then evaluated and the second segment '/n' is matched, the router automatically matches empty string '' routing is complete. The 'fails' scenario issue is that the link parameters array of the <a [routerLink]="[{ outlets: {popup: ['compose']}}]">Contact</a> is an empty string and the url is currently '/admin'. Yes, the key difference is location in the hierarchy at which the empty '' string automatically evaluated by the router occurs, in other words, the location at which the router evaluation of the routes configuration completes. It is subtle but the empty string evaluated in the 'fails' scenario completes at the top level AdminComponent; therefore, router pattern matching backtracking looks for empty string '' automatically at the parent route 'admin', as result of the redirectTo in the app-routing routes config. In the second 'success' scenario, the router evaluation of the routes config completes at the child path '' of the parent '/n' which is level below in the hierarchy compared to the admin-routing routes config 'fails' scenario; therefore, in the second 'success' scenario, the '' empty string that is automatically evaluated is unaffected by the redirect from the app-routing routes config when the <a [routerLink]="['', { outlets: {popup: ['compose']}}]">Contact</a> is clicked.

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

In order to fix the 'fails' scenario routing config you need to modify either the first segment of the links parameter array of your Contact routerLink directive to specify the admin path i.e., <a [routerLink]="['/admin', { outlets: {popup: ['compose']}}]">Contact</a>, or modify the hierarchy at which the empty string '' path that is automatically evaluated by the router completion occurs.

要通过修改路由配置层次结构来修复"由路由器自动评估的空字符串 '' 路径的父级，重要的是要注意空字符串 '' 路径的父级不能是空字符串 '' 路径.例如:

To "fix" by modifying the routes config hierarchy at which the empty string '' path that is automatically evaluated by the router the parent, it is important to note that the parent of the empty string '' path must not be an empty string '' path. In example:

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>

这篇关于如何使命名路由出口与 loadChildren 一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！