Angular2 Router: Wie man Kindermodule mit eigenen Routing-Regeln korrekt lädt
hier ist meine Angular2 App Struktur:
Hier ist ein Teil meines Codes. Das Folgende ist das Hauptmodule
der Angular2-App, die ihre Routing-Regeln und ein untergeordnetes Modul importiert EdgeModule
) und verwendet einige Komponenten, die sich auf bestimmte Seiten beziehen.
app.module.ts
@NgModule({
declarations: [
AppComponent,
PageNotFoundComponent,
LoginComponent
],
imports: [
...
appRouting,
EdgeModule
],
providers: [
appRoutingProviders,
LoginService
],
bootstrap: [AppComponent]
})
export class AppModule {
}
Hier sind die Routing-Regeln für das Hauptmodul. Es gibt Pfade zur Anmeldeseite und Seite nicht gefunden.
app.routing.ts
const appRoutes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: '**', component: PageNotFoundComponent }
];
export const appRoutingProviders: any[] = [];
export const appRouting = RouterModule.forRoot(appRoutes, { useHash: true });
Hier istEdgeModule
deklariert die verwendete Komponente und importiert ihre eigenen Routing-Regeln und 2 untergeordneten Module FirstSectionModule
undSecondSectionModule
).
edge.module.ts
@NgModule({
declarations: [
EdgeComponent,
SidebarComponent,
TopbarComponent
],
imports: [
...
edgeRouting,
FirstSectionModule,
SecondSectionModule
],
providers: [
AuthGuard
]
})
export class EdgeModule {
}
Hier sind die Routing-Regeln für das Modul, das, wie Sie sehen können, Komponenten der oberen Leiste und der Seitenleiste lädt.
edge.routing.ts
Paths['edgePaths'] = {
firstSection: 'firstSection',
secondSection: 'secondSection'
};
const appRoutes: Routes = [
{ path: '', component: EdgeComponent,
canActivate: [AuthGuard],
children: [
{ path: Paths.edgePaths.firstSection, loadChildren: '../somepath/first-section.module#FirstModule' },
{ path: Paths.edgePaths.secondSection, loadChildren: '../someotherpath/second-section.module#SecondModule' },
{ path: '', redirectTo: edgePaths.dashboard, pathMatch: 'full' }
]
}
];
export const edgeRouting = RouterModule.forChild(appRoutes);
Dies ist schließlich eines der beiden untergeordneten Module, deren Komponenten vorhanden sind und deren Routing-Regeln importiert werden.
first-section.module.ts
@NgModule({
declarations: [
FirstSectionComponent,
SomeComponent
],
imports: [
...
firstSectionRouting
],
providers: [
AuthGuard,
]
})
export class FirstSectionModule {
}
Dies sind die Weiterleitungsregeln für die Seiten (Komponenten) vonFirstSectionModule
first-section.routing.ts
Paths['firstSectionPaths'] = {
someSubPage: 'some-sub-page',
someOtherSubPage: 'some-other-sub-page'
};
const appRoutes: Routes = [
{
path: '',
children: [
{ path: Paths.firstSectionPaths.someSubPage, component: someSubPageComponent},
{ path: Paths.firstSectionPaths.someOtherSubPage, component: someOtherSubPageComponent},
{ path: '', component: AnagraficheComponent }
]
}
];
export const firstSectionRouting = RouterModule.forChild(appRoutes);
Fast das gleiche passiert fürsecond-section.module.ts
undsecond-section.routing.ts
files.
Wenn ich die App starte, wird als erstes die Seite geladen, die mit @ zusammenhängFirstSectionComponent
, ohne Sidebar oder Topbar.
Kannst du mir sagen, was mit meinem Code nicht stimmt? Die Konsole enthält keine Fehler.