问题描述
我创建了两个关于路由的 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.
您提供的第一个示例失败"与第二个有效"示例之间的区别在于,在路由模式匹配期间,路由配置中的角度路由器 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' 场景问题是 的链接参数数组code> 是一个空字符串,url 当前是/admin".是的,关键区别在于路由器自动评估的空 '' 字符串出现在层次结构中的位置,换句话说,路由配置的路由器评估完成的位置.这很微妙,但在失败"场景中评估的空字符串在顶级 AdminComponent 中完成;因此,路由模式匹配回溯会自动在父路由 'admin' 中查找空字符串 '',这是 app-routing 路由配置中的 redirectTo 的结果.在第二个 'success' 场景中,路由配置的路由器评估在父 '/n' 的子路径 '' 完成,与管理员路由路由配置 'fails' 场景相比,它在层次结构中的级别较低;因此,在第二个成功"场景中,当
被点击.
要通过修改路由配置层次结构来修复"由路由器自动评估的空字符串 '' 路径的父级,重要的是要注意空字符串 '' 路径的父级不能是空字符串 '' 路径.例如:
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 一起使用?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!