Angular Routing Lazy Load Kinder

Question

Ich bin derzeit fest, wie Angular Routing funktioniert und brauche etwas Hilfe. Im Grunde genommen in meinem Projekt habe ich ein Kernmodul, das zum Laden der alle Root-Routen verwendet wird, ist die Heimat folgende:

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

Und in app/Usermanagement Ordner Ich habe eine index.ts für Importe verwendet und erklären alle die Module:

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

Und mein Kind Führung innerhalb des UserManagementRoutingModule setzen:

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

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

auf diese Weise, wenn ich nach http://hostname/user gehen wird t lenken o meine UserHomeComponent-Komponente, aber wenn ich gehe zu http://hostname/user/userDetails Angular nicht auf diese Seite umleiten. Wie sollte ich meinen Code bearbeiten, damit ich auf die userDetailsComponent zugreifen kann?

Dank

Answer 1

Wenn verzögertes Laden, ist am beste Praxis alle unter einem leeren Pfad als Kinder weitergeleitet zu definieren. Außerdem müssen Sie sicher sein, CommonModule oder BrowserModule in Ihrem @ngModule s zu importieren (in Ihrem Fall, da es ein Kind ist, das Sie häufig verwenden).

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

Die oben genannten werden sicherstellen, dass die Komponenten richtig geladen werden, und die unten aufgeführten bieten Best Practice Routing.

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

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