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