Angular Routing懒惰加载儿童的孩子

Question

我目前被困在角度路由如何工作，需要一些帮助。基本上在我的项目，我有一个核心模块，用于加载所有的根路径，家是以下几点：

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就会直接ŧ o我的UserHomeComponent组件，但是如果我去http://hostname/user/userDetails Angular没有重定向到该页面。我应该如何编辑我的代码，以便可以访问userDetailsComponent？

感谢

Answer 1

当延迟加载，最好的做法是定义在一个空白的路径作为儿童的所有路由。此外，您需要确保在您的@ngModule中输入CommonModule或BrowserModule（在您的情况下，因为它是您常用的孩子）。

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