Angular2 Routing:导入带有路由的子模块，并使其带有前缀

问题描述

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

I have a main module and some submodules. And I want to specify some not trivial routing between them.

我更愿意在子模块中定义子模块的路由.例如:

I'd prefer defining the routes of a submodule within the submodule. E.g.:

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

我想使用自己的内部路由导入该模块，但希望将其整个路由作为前缀.

I want to import this module with its own internal routing, but I want to make its whole routing prefixed.

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等，但是我想像这样对它们添加前缀:

This settings creates the following routes: /country, /country/list, etc., but I want to make them prefixed like this:

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

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

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

There are other modules that I want to access via another routing, e.g. a CityModule under /otherstuff/city/create and /otherstuff/city/list`.

我的问题:

1. 是否可以使用自己的路由导入模块并使其路由带有前缀?
2. 此外:是否有一种方法可以确定两个子模块之间最终(前缀)路由的链接?

更新

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

The accepted answer is the best way to do it: create the routes in the module, register them externally. Thus you can modify the routes, e.g. prefix them (this is what I wanted), you can define guards, override or filter them, etc.

推荐答案

在您的appRoutes中添加子路由，例如

in your appRoutes add child route like

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

In CountryComponent.html

<router-outlet></router-outlet>

这篇关于Angular2 Routing:导入带有路由的子模块，并使其带有前缀的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！