Angular 路由延迟加载子项的子项

Question

我目前无法理解 Angular 路由的工作原理，需要一些帮助。基本上在我的项目中，我有一个核心模块用于加载所有的根路由，主页如下：

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 it will direct to my UserHomeComponent component, however if i go to http://hostname/user/userDetails Angular 时并没有重定向到那个页面。我应该如何编辑我的代码才能访问 userDetailsComponent？

谢谢

Answer 1

延迟加载时，最佳做法是将所有路由定义为空白路径下的 children。此外，您需要确保在 @ngModule 中导入 CommonModule 或 BrowserModule（在您的情况下，因为它是 child，您将使用 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 {
}

Angular 路由延迟加载子项的子项

Angular Routing Lazy Load Children's Children

lazy-loading

angular-routing

angular