Angular 7 嵌套延迟加载子路由答案

【问题标题】：Angular 7 Nested Lazy Loaded Children RoutesAngular 7 嵌套延迟加载子路由
【发布时间】：2020-04-12 05:35:09
【问题描述】：

我有以下代码：

app-routing.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 {
}

和 App Router 出口一样

<router-outlet></router-outlet>

config-routing.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 {

}

并将路由器出口配置为

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

lookup-routing.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 {

}

在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"}，很明显它正在重定向到配置。我无法弄清楚它为什么会重定向并且无法转到查找组件。我在这里研究了其他问题，但没有用。任何帮助，将不胜感激。谢谢！

【问题讨论】：

标签： angular angular7 angular2-routing angular-routing angular7-router

【解决方案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'
         }
    ]
  }  
];

【讨论】：

感谢您的回复，但它不起作用。我什至没有加载ConfigComponent