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

问题描述

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

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.

应用程序路由模块

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 example, pressing the 'Contact' link works.

应用程序路由模块

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的空路径. 根据文档的路径为空应该可以.

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.

推荐答案

routerLink指令中用于联系"的链接参数数组的第一段是指父路由和包含该组件的组件模板的相应路由器出口. routerLink.您可能需要将命名路由器出口的路由配置放置在app-routing配置中，而不是在失败"情况下放置在admin-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.

您提供的第一个示例失败"与第二个示例有效"之间的区别在于，在路由模式匹配期间，路由配置中的角路由器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.

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

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', { outlets: {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屋！