Angular2路由：使用路由導入子模塊+使其前綴

Question

我有一個主模塊和一些子模塊。我想在它們之間指定一些不重要的路由。

我寧願在子模塊內定義子模塊的路由。例如： -

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

我想導入該模塊有自己的內部路由，但我想使其整個路由前綴。

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

此設置創建下列路線：​​3210，/country/list等，但我想讓他們前綴是這樣的：

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

還有其他模塊我想通過其他路由訪問的文件，例如CityModule在/otherstuff/city/create和/ otherstuff/city/list`下。

我的問題：

1. 是否可以導入一個模塊都以其自身的路由，並使其路線前綴？
2. 此外：有沒有辦法在兩個子模塊之間建立最終（前綴）路線的無關聯？

UPDATE

接受的答案是做到這一點的最好辦法：該模塊中創建的路由，外部註冊。因此，你可以修改路線，例如它們的前綴（這是我想要的），你可以定義衛士，重寫或過濾等

Answer 1

在appRoutes

添加子路線像

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

創建一個單獨的文件航線

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

]; 

在CountryComponent.html

<router-outlet></router-outlet> 

Answer 2

與此路由東西打我剛剛發現我想分享一個乾淨的方式，來處理沒有頭痛的子模塊路線，甚至更喜歡Angular。以OP案例爲例，我建議您學習以下代碼：

將實用函數添加到您的CountryModule子模塊中，以便從路由器動態加載它，並避免編譯器警告，提示用參考替換箭頭函數要導出函數：

@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; 
} 

現在你可以導入入口點到您的父模塊要放置路線：

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

而且你去那裏！ 您現在可以使用settings/country/list和settings/country/list來訪問子模塊組件。

警告

小心不要導入CountryModule到您的父模塊的@NgModule，因爲它將覆蓋settings路徑之外的路由。讓路由器完成這項工作。

享受！