Angular Routing Lazy Load Children's Children

Question

我目前对 Angular Routing 的工作方式感到困惑，需要一些帮助。基本上在我的项目中，我有一个用于加载所有根路由的核心模块，主页如下：

const routes: Routes = [
  {path: '', redirectTo: '/login', pathMatch: 'full'},
  {path: 'user', loadChildren: 'app/userManagement#UserModule', pathMatch: 'full',canActivate: [AuthGaurd] },
  {path: '**', component: PageNotFoundComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})


export class AppRoutingModule {}

在 app/userManagement 文件夹中，我有一个 index.ts 用于导入并声明所有模块：

@NgModule({
  imports: [
    SharedModule,
    UserManagementRoutingModule
  ],
  declarations: [UserHomeComponent, UserListComponent, UserDetailsComponent]
})
export class UserModule {
}

我的子路由放在 UserManagementRoutingModule 内：

const routes: Routes = [
  {
    path: '',
    component: UserHomeComponent,
  },
  {
    path: 'userDetails',
    component: UserDetailsComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class UserManagementRoutingModule {
}

以这种方式，当我转到 http://hostname/user 时，它将直接指向我的 UserHomeComponent 组件，但是如果我转到 http://hostname/user/userDetails，Angular 不会重定向到该页面。我应该如何编辑我的代码以便我可以访问 userDetailsComponent？

谢谢

Answer 1

延迟加载时，最佳做法是将空白路径下的所有路由定义为子路径。另外，您需要确保在您的@ngModules 中导入CommonModule 或BrowserModule（在您的情况下，因为它是一个孩子，您将使用common）。

@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    UserManagementRoutingModule
  ],
  declarations: [UserHomeComponent, UserListComponent, UserDetailsComponent]
})
export class UserModule {
}

以上将确保正确加载组件，以下将提供最佳实践路由。

const routes: Routes = [
  {
    path: '',
    children: [
      { path: '', component: UserHomeComponent },
      { path: 'userDetails', component: UserDetailsComponent }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class UserManagementRoutingModule {
}