Question

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

在this示例中，按下＆＃39;联系人＆＃39;链接失败。

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

在this示例中，按下＆＃39;联系人＆＃39;链接工作。

应用-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的空路径。根据具有空路径的documentation应该有效。

Answer 1

您的routerLink指令的链接参数数组的第一段＆＃34; Contact＆＃34;是指包含routerLink的组件模板的父路由和相应的路由器出口。您需要在app-routing配置中放置指定路由器插座的路由配置，而不是将管理路由配置放在＆＃39;失败＆＃39;情景，但由于其他原则之间的关注分离，这可能是不可取的。

您提供的第一个例子＆＃39;失败＆＃39;和第二个例子“＆＃39;工作＆＃39;角度路由器redirectTo在路由配置＆＃34;回溯＆＃34;在路线的模式匹配期间;但是，第二个关键方面是由于匹配而评估的行为不应影响路由模式匹配的行为。

在＆＃39;失败＆＃39;场景，路线段＆＃39;＆＃39;匹配，重定向要将网址更改为＆＃39; / admin＆＃39;，路由器匹配路径＆＃39; / admin＆＃39;，路由器会自动匹配空字符串＆＃39;＆＃39;在admin-routing配置中，路由已完成。在第二次成功＆＃39;方案，路径匹配＆＃39;＆＃39;，redirectTo匹配第一个分段＆＃39; / admi＆＃39;，路由器评估网址的第二个分段＆＃39; / n＆＃39;由于路由尚未完成，路由器会在app-routing配置中查找匹配＆＃39; / n＆＃39;并且没有找到任何匹配项，然后评估管理路由配置，第二段＆＃39; / n＆＃39;匹配后，路由器自动匹配空字符串＆＃39;＆＃39;路由完成。＆＃39;失败＆＃39;方案问题是<a [routerLink]="[{ outlets: {popup: ['compose']}}]">Contact</a>的链接参数数组是一个空字符串，而网址目前是＆＃39; / admin＆＃39;。是的，关键的区别在于层次结构中的位置，空的＆＃39;发生路由器自动评估的字符串，换句话说，路由器配置的路由器评估完成的位置。它是微妙的，但在＆＃39;中评估的空字符串失败＆＃39;场景在顶级AdminComponent完成;因此，路由器模式匹配回溯查找空字符串＆＃39;＆＃39;自动在父路由＆＃39; admin＆＃39;，作为app-routing routes config中redirectTo的结果。在第二次成功＆＃39;在这种情况下，路由配置的路由器评估在子路径上完成＆＃39;＆＃39;父母＆＃39; / n＆＃39;与管理路由路由相比，层次结构中的级别低于配置＆＃39;失败＆＃39;场景;因此，在第二个成功＆＃39;情景，＆＃39;＆＃39;单击<a [routerLink]="['', { outlets: {popup: ['compose']}}]">Contact</a>时，自动评估的空字符串不受来自app-routing路由配置的重定向的影响。

为了解决“失败”问题。方案路由配置您需要修改Contact routerLink指令的links参数数组的第一段以指定管理路径，即<a [routerLink]="['/admin', { outlets: {popup: ['compose']}}]">Contact</a>，或修改空字符串的层次结构＆＃39;＆＃39 ;路由器完成自动评估的路径发生。

To＆＃34; fix＆＃34;通过修改路由配置层次结构，其中空字符串＆＃39;＆＃39;由父路由器自动评估的路径，重要的是要注意空字符串的父节点＆＃39;＆＃39;路径不能是空字符串＆＃39;＆＃39;路径。例如：

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>

Answer 2

以下解决方案适用于您想要多少个网点。您可以在 second.component.ts 中拥有相同的东西。

first.module.ts

const routerConfig: Routes = [
    {path: '', component: FirstComponent},

    {
        path: 'posts', component: FirstComponent, children: [{
            path: '',
            loadChildren: './second.module#SecondModule'
        }]
    }
}

first.component.html

// ....
<router-outlet></router-outlet>
// ....

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

2 个答案: