我正在使用Lazyloading
我有两个router-outlets
。当我想导航到另一条子路线时,就会出现问题。我收到此错误,
TypeError: Cannot read property 'split' of undefined at defaultUrlMatcher (router.js:566) at match (router.js:2221) .....
我的主要应用程序路由器模块看起来像,
const appRoutes: Routes = [
{ path: '', redirectTo: 'web/welcome' , pathMatch: 'full' },
{ path: 'web', redirectTo: 'web/welcome' , pathMatch: 'full' },
{
path: 'web',
loadChildren: 'app/core/website/modules/website.module#WebSiteModule',
data: { preload: true }
},
{
path: 'dbapp', canActivate: [AuthGuardService],
loadChildren: 'app/core/database/modules/db.module#DbModule',
data: { preload: true }
},
{ path: '**', redirectTo: '/404', pathMatch: 'full'},
{ path: '**', component: NotFoundComponent, data: { message: 'We Could Not Serve Your Request!'}},
];
以及 dbapp
我有这个路由模块,
const dbRoutes: Routes = [
{
path: '',
component: DbHomeComponent,
data: { preload: true },
pathMatch: 'full',
children: [
{ path: '', component: UserDashboardComponent },
{
path: 'registry',
canActivate: [RoleGuardService],
data: { expectedRole: { roles: ['reg'] } },
loadChildren:
'app/core/database/database-cores/registry-core/modules/registry.module#RegistryModule'
// canActivateChild: [RoleGuardService]
},
{
path: 'embryology',
canActivate: [RoleGuardService],
data: { expectedRole: { roles: ['emb'] } },
loadChildren:
'app/core/database/database-cores/embryology-core/modules/embryology-routing.module#EmbryologyRoutingModule'
},
{
path: 'nursing',
canActivate: [RoleGuardService],
data: { expectedRole: { roles: ['nur'] } },
loadChildren:
'app/core/database/database-cores/embryology-core/modules/embryology-routing.module#EmbryologyRoutingModule'
}
]
},
];
我的 map 如下所示,
路由器映射,带下划线 components
是router-outlets
所以根据我的配置。路由从 https://www.artngcore.com:4200/web/welcome
开始身份验证后,路由更改为 https://www.artngcore.com:4200/dbapp
我成功导航到 UserDashboardComponent
作为默认路由,如果我路由到其他 child ,即routerLink="/dbapp/registry"
,我的问题
如何将子组件显示为默认路由并导航到其他子路由?
最佳答案
已解决,答案来源于here ,
所以我的dbapp
路由模块应该是这样的,
const dbRoutes: Routes = [
{
path: '',
component: DbHomeComponent,
data: { preload: true },
children: [
{ path: '', component: UserDashboardComponent },
{
path: 'registry',
canActivate: [RoleGuardService],
data: { expectedRole: { roles: ['reg'] } },
loadChildren:
'app/core/database/database-cores/registry-core/modules/registry.module#RegistryModule'
// canActivateChild: [RoleGuardService]
},
{
path: 'embryology',
canActivate: [RoleGuardService],
data: { expectedRole: { roles: ['emb'] } },
loadChildren:
'app/core/database/database-cores/embryology-core/modules/embryology-routing.module#EmbryologyRoutingModule'
},
{
path: 'nursing',
canActivate: [RoleGuardService],
data: { expectedRole: { roles: ['nur'] } },
loadChildren:
'app/core/database/database-cores/embryology-core/modules/embryology-routing.module#EmbryologyRoutingModule'
}
]
}
];
我要做的就是改变路由匹配策略,pathMatch: 'full'
不应包含在内
关于angular - 如何将子组件设置为路由器导出的默认路由?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49038719/