Angular2 Routing: Importieren Submodul mit Routing + Präfix

Question

Ich habe ein Hauptmodul und einige Submodule. Und ich möchte ein nicht triviales Routing zwischen ihnen angeben.

Ich würde lieber die Routen eines Submoduls innerhalb des Submoduls definieren. Z.B .:

@NgModule({ 
    imports: [ 
     /*...*/ 
     RouterModule.forChild([ 
      { path: 'country', redirectTo: 'country/list' }, 
      { path: 'country/list', component: CountryListComponent }, 
      { path: 'country/create', component: CountryCreateComponent }, 
      /*...*/ 
     ]) 
    ], 
    declarations: [/*...*/], 
    exports: [ 
     RouterModule, 
    ], 
}) 
export class CountryModule {} 

Ich möchte dieses Modul importieren mit seinem eigenen internen Routing, aber ich will seine gesamten Routing-Präfix machen.

const appRoutes = [ 
    { path: '', component: HomeComponent }, 
    /*... (basic routes)*/ 
]; 

@NgModule({ 
    imports: [ 
     /*...*/ 
     RouterModule.forRoot(appRoutes), 
     CountryModule, // <- how to make its routing prefixed?? 
    ], 
    declarations: [ 
     /*...*/ 
     AppComponent, 
    ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule {} 

This Einstellungen erstellt die folgenden Routen: /country, /country/list usw., aber ich möchte sie so voran machen:

• /settings/country
• /settings/country/list
• /settings/country/create

Es gibt andere modu les, auf die ich über ein anderes Routing zugreifen möchte, z. a CityModule unter /otherstuff/city/create und/otherstuff/city/list`.

Meine Fragen:

1. Ist es möglich, ein Modul mit einem eigenen Routing zu importieren und die zugehörigen Tourenvoran machen?
2. Außerdem: Gibt es eine Möglichkeit, Verbindungen zwischen 2 Submodulen Agnostisch von ihren endgültigen (Präfix) Routen zu machen?

UPDATE

Die akzeptierte Antwort ist der beste Weg, es zu tun: die Routen in dem Modul erstellen, so dass sie von außen registrieren. So können Sie die Routen ändern, z. Präfix sie (das ist, was ich wollte), können Wachen definieren, außer Kraft setzen oder sie filtern, usw.

Answer 1

in Ihrem appRoutes hinzufügen Kind Route wie

const appRoutes = [ 
    { path: '', component: HomeComponent }, 
    { 
    path: 'settings', 
    component: CountryComponent, 
    canActivate: [AuthGuard], 
    children: COUNTRY_ROUTES 
    }, 
]; 

eine separate Routen erstellen

export const COUNTRY_ROUTES:Routes = [ 
    { path: 'country', redirectTo: 'country/list' }, 
    { path: 'country/list', component: CountryListComponent }, 
    { path: 'country/create', component: CountryCreateComponent }, 

]; 

Datei

In CountryComponent.html

<router-outlet></router-outlet> 

Answer 2

mit diesen Routing Sachen Spielen finde ich gerade Ein sauberer Weg den ich teilen möchte, um die Routen von Submodulen ohne Kopfschmerzen zu bewältigen und Angular noch mehr zu lieben.Unter Berücksichtigung des OP-Falles schlage ich Ihnen vor, den folgenden Code zu untersuchen:

Fügen Sie Ihrem CountryModule Submodul eine Dienstprogrammfunktion hinzu, um es dynamisch vom Router zu laden und eine Compiler-Warnung zum Ersetzen der Pfeilfunktion durch einen Verweis zu vermeiden zu einer exportierten Funktion:

@NgModule({ 
    imports: [ 
    ... 
    RouterModule.forChild([ 
     { path: 'country', pathMatch: 'full', redirectTo: 'list' }, 
     { path: 'country/list', component: CountryListComponent }, 
     { path: 'country/create', component: CountryCreateComponent }, 
    ]) 
    ], 
    declarations: [ ... ], 
    exports: [ 
    RouterModule, 
    ], 
}) 
export class CountryModule {} 

export function CountryEntrypoint() { 
    return CountryModule; 
} 

Jetzt können Sie, dass in Ihrem Entryelternmodul importieren, in dem Sie die Routen platzieren möchten:

@NgModule({ 
    imports: [ 
    ... 
    RouterModule.forRoot([ 
     { path: '', pathMatch: 'full', component: HomeComponent }, 
     { path: 'settings', loadChildren: CountryEntrypoint } 
    ]), 
    ], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent] 
}) 
export class AppModule {} 

Und Sie dorthin gehen! Mit settings/country/list und settings/country/list erreichen Sie jetzt Ihre Submodulkomponenten.

WARNUNG

Seien Sie vorsichtig, um nicht die CountryModule in Ihr Elternmodul @NgModule die importieren, weil es die Routen außerhalb des settings Pfad überschreiben. Lass den Router die Arbeit machen.

Viel Spaß!