[英]Angular 7 Nested Lazy Loaded Children Routes
I have following code:我有以下代码:
app-routing.module.ts应用程序路由.module.ts
const routes: Routes = [
{
path: 'login',
component: LoginComponent
},
{
path: 'user',
loadChildren: './modules/user/user.module#UserModule',
canActivate: [AuthGuardService]
},
{
path: 'config',
loadChildren: './modules/config/config.module#ConfigModule',
canActivate: [AuthGuardService]
},
{
path: '',
redirectTo: '/user',
pathMatch: 'full'
},
{
path: '**',
redirectTo: '/user',
pathMatch: 'full'
}
];
@NgModule({
imports: [RouterModule.forRoot(routes, {enableTracing: true})],
exports: [RouterModule]
})
export class AppRoutingModule {
}
And App Router outlet as和 App Router 插座一样
<router-outlet></router-outlet>
config-routing.module.ts配置路由.module.ts
const configRoutes: Routes = [
{
path: 'lookups',
loadChildren: './lookup/lookup.module#LookupModule',
outlet: 'config',
canActivate: [AuthGuardService]
},
{
path: '',
component: ConfigComponent,
canActivate: [AuthGuardService],
},
{
path: '**',
redirectTo: '',
pathMatch: 'full'
}
];
@NgModule({
imports: [RouterModule.forChild(configRoutes)],
exports: [RouterModule]
})
export class ConfigRoutingModule {
}
And Config Router outlet as并将路由器出口配置为
<router-outlet name="config></router-outlet>
lookup-routing.module.ts查找路由.module.ts
const lookupRoutes: Routes = [
{
path: ':id/options',
component: LookupOptionComponent,
canActivate: [AuthGuardService]
},
{
path: '',
component: LookupComponent,
canActivate: [AuthGuardService],
},
{
path: '**',
redirectTo: '',
pathMatch: 'full'
}
];
@NgModule({
imports: [RouterModule.forChild(lookupRoutes)],
exports: [RouterModule]
})
export class LookupRoutingModule {
}
Inside ConfigComponent
, I am doing this.router.navigate([
${path} ], {relativeTo: this.route});
在
ConfigComponent
里面,我在做this.router.navigate([
${path} ], {relativeTo: this.route});
where path
is lookups
.其中
path
是lookups
。
The issue is whenever I route to /config/lookups
or /config/lookups/1/options
it redirects to /config
.问题是每当我路由到
/config/lookups
或/config/lookups/1/options
时,它都会重定向到/config
。 I see NavigationEnd {id: 1, url: "/config/lookups", urlAfterRedirects: "/config"}
in the console and it's apparent that it's redirecting to config.我在控制台中看到
NavigationEnd {id: 1, url: "/config/lookups", urlAfterRedirects: "/config"}
,很明显它正在重定向到配置。 I am not able to figure out why it is redirecting and cannot go to lookups component.我无法弄清楚它为什么重定向并且不能 go 到查找组件。 I have looked into other issues here and no-avail.
我在这里研究了其他问题,但没有用。 Any help would be appreciated.
任何帮助,将不胜感激。 Thank you!
谢谢!
Change the config routes like below. You need to add your child routes in your module under children array
const configRoutes: Routes = [
{
path: '',
component: ConfigComponent,
canActivate: [AuthGuardService],
children : [
{
path: 'lookups',
loadChildren: './lookup/lookup.module#LookupModule',
outlet: 'config',
canActivate: [AuthGuardService]
},
{
path: '**',
redirectTo: '',
pathMatch: 'full'
}
]
}
];
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.