6

我有一个主模块和一些子模块。我想在它们之间指定一些不平凡的路由。

我更喜欢在子模块中定义子模块的路由。例如：

@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

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

我的问题：

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

更新

公认的答案是最好的方法：在模块中创建路由，在外部注册它们。因此，您可以修改路由，例如为它们添加前缀（这是我想要的），您可以定义保护、覆盖或过滤它们等。

4

2 回答 2

10

玩这个路由的东西，我刚刚找到了一种我想分享的干净的方式，可以轻松地处理子模块的路由，并且更加喜欢 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路由。让路由器完成这项工作。

享受！

于 2017-08-16T16:01:50.640 回答
5

在您的 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>
于 2016-12-07T15:32:31.510 回答