Question

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

grades

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

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 {}

我的子路由放在UserManagementRoutingModule中：

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

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

由于

Answer 1

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

@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 {
}

角度路由懒惰负载儿童的孩子

1 个答案: