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路径之外的路由。让路由器完成这项工作。

享受！