Angular2 Routing：导入带有路由的子模块+使其成为前缀

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

此设置创建以下路由：/country、/country/list 等，但我想让它们的前缀如下：

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

我还想通过其他路由访问其他模块，例如/otherstuff/city/create 和 /otherstuff/city/list` 下的 CityModule。

我的问题：

是否可以导入一个带有自己路由的模块并为其路由添加前缀？
此外：有没有办法在 2 个子模块之间建立与它们的最终（前缀）路径无关的链接？

更新

接受的答案是最好的方法：在模块中创建路由，在外部注册它们。因此您可以修改路线，例如给它们加上前缀（这就是我想要的），你可以定义守卫，覆盖或过滤它们等。

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/create.

访问您的子模块组件

警告

注意不要将 CountryModule 导入父模块的 @NgModule，因为它会覆盖 settings 路径之外的路由。让路由器来完成这项工作。

尽情享受吧！

Angular2 Routing：导入带有路由的子模块+使其成为前缀

Angular2 Routing: import submodule with routing + making it prefixed

angular2-routing

angular2-modules

angular