wake-up-neo.com

Angular2-Router: Wie werden untergeordnete Module mit ihren eigenen Routing-Regeln korrekt geladen?

hier ist meine Angular2 App Struktur:

enter image description here

Hier ist ein Teil meines Codes. Das Folgende ist das Haupt-module der Angular2-App, die ihre Routing-Regeln und ein untergeordnetes Modul (EdgeModule) importiert und einige Komponenten verwendet, 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 ist EdgeModule, das die verwendete Komponente deklariert und ihre eigenen Routing-Regeln und 2 untergeordneten Module (FirstSectionModule und SecondSectionModule) importiert.

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);

Schließlich ist dies eines der beiden untergeordneten Module, die ihre Komponenten haben und ihre Routing-Regeln importieren.

first-section.module.ts

@NgModule({
    declarations: [
        FirstSectionComponent,
        SomeComponent
    ],
    imports: [
        ...
        firstSectionRouting
    ],
    providers: [
        AuthGuard,
    ]
})

export class FirstSectionModule {
}

Dies sind die Weiterleitungsregeln für die Seiten (Komponenten) von FirstSectionModule

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ür second-section.module.ts und second-section.routing.ts Dateien.

Wenn ich die App starte, werden als erstes die Seiten geladen, die sich auf FirstSectionComponent beziehen, ohne Seitenleiste oder obere Leiste.

Können Sie mir sagen, was mit meinem Code nicht stimmt? Es gibt keine Fehler in der Konsole.

33
smartmouse

Sie können dies mit loadChildren versuchen, wobei die homeModule, productModule, aboutModule ihre eigenen Routenregeln haben.

const routes: Routes = [
    { path: 'home', loadChildren: 'app/areas/home/home.module#homeModule' },
    { path: 'product', loadChildren: 'app/areas/product/product.module#ProductModule' },
    { path: 'drawing', loadChildren: 'app/areas/about/about.module#AboutModule' }
];

export const appRouting = RouterModule.forRoot(routes);

und die Regeln für die Heimroute sind wie folgt

export const RouteConfig: Routes = [
    {
        path: '',
        component: HomeComponent,
        canActivate: [AuthGuard],
        children: [
            { path: '', component: HomePage },
            { path: 'test/:id', component: Testinfo},
            { path: 'test2/:id', component: Testinfo1},
            { path: 'test3/:id', component: Testinfo2}
        ]
    }
];

dies wird auch als verzögertes Laden der Module bezeichnet.

{ path: 'lazy', loadChildren: 'lazy/lazy.module#LazyModule' }

Hier sind einige wichtige Dinge zu beachten: Wir verwenden die Eigenschaft loadChildren anstelle der Komponente. Wir übergeben einen String anstelle eines Symbols, um ein eifriges Laden des Moduls zu vermeiden. Wir definieren nicht nur den Pfad zum Modul, sondern auch den Namen der Klasse. Es gibt nichts Besonderes an LazyModule, außer dass es ein eigenes Routing und eine Komponente namens LazyComponent hat.

Schauen Sie sich dieses tolle Tutorial dazu an: https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html

In Ihrer App.routing.ts gibt es nur 2 Routen und keine Route, um zum Hauptabschnitt zu navigieren (wie in der Abbildung). Es muss einen Routeneintrag mit der Eigenschaft loadchildren geben, damit das Modul für den Hauptabschnitt geladen wird.

routes: Routes = [...
{ 
path: 'main', loadChildren: '<file path>/<Edge module file name>#EdgeModule' 
}
...];

Dadurch werden die restlichen Module, Komponentenrouten und alles im EdgeModule geladen.

1
CharithW

Ich bin mir nicht sicher, ob ich das Problem richtig verstehe, aber hier ist ein kleiner Codeausschnitt, mit dem ich Routen dynamisch generiert habe:

app.component.ts:

constructor(private _router: Router) {
}

ngOnInit() {
     ...
     this._router.config[0].children = myService.getRoutes(); 
     this._router.resetConfig(this._router.config);
     console.debug('Routes:', this._router.config);
     ...
}

Es ist keine OOTB Lösung, aber Sie können Informationen über aktuelle Routen erhalten.

0
Sargon

Es ist ein Abhängigkeitsinjektionsproblem. Wir müssen FirstSectionModule & SecondSectionModule nicht in das edgeModule & über die Route einfügen, die wir innerhalb von FirstSectionModule & SecondSectionModule verwenden können. Es funktioniert also, wenn Sie es einfach aus edgeModule entfernen.

0
Vivek Kumar