Angular 7嵌套懒惰加载的儿童路线

Question

我有以下代码：

应用程序路由模块.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 {
}

应用路由器出口为

<router-outlet></router-outlet>

配置路由模块.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 {
}

并将路由器出口配置为

<router-outlet name="config></router-outlet>

查找路由模块.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 {
}

在ConfigComponent中，我正在执行this.router.navigate([${path}], {relativeTo: this.route});，其中path是lookups。

问题是，每当我路由到/config/lookups或/config/lookups/1/options时，它都会重定向到/config。我在控制台中看到NavigationEnd {id: 1, url: "/config/lookups", urlAfterRedirects: "/config"}，很明显它正在重定向到config。我不知道为什么它正在重定向并且不能转到查找组件。我在这里研究过其他问题，但没有结果。如有任何帮助，我们将不胜感激。非常感谢。

Answer 1

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