Angular2路由:使用路由导入子模块+使其前缀
我有一个主模块和一些子模块。我想在它们之间指定一些不重要的路由。Angular2路由:使用路由导入子模块+使其前缀
我宁愿在子模块内定义子模块的路由。例如: -
@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`下。
我的问题:
- 是否可以导入一个模块都以其自身的路由,并使其路线前缀?
- 此外:有没有办法在两个子模块之间建立最终(前缀)路线的无关联?
UPDATE
接受的答案是做到这一点的最好办法:该模块中创建的路由,外部注册。因此,你可以修改路线,例如它们的前缀(这是我想要的),你可以定义卫士,重写或过滤等
添加子路线像
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>
只是澄清:一旦模块导入到模块中,无法更改模块的路由? –
@Gábor伊姆雷,你不能。 –
与此路由东西打我刚刚发现我想分享一个干净的方式,来处理没有头痛的子模块路线,甚至更喜欢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
路径之外的路由。让路由器完成这项工作。
享受!
这应该是被接受的答案。注意,你不需要导出一个“入口点”,你可以执行'loadChildren:()=> CountryModule'。 –
@MichaelPetito我们可以,但有一个错误/警告与角/ cli抱怨使用lambdas并建议用导出的函数替换它们;) –
可能你应该强调更多,你的警告'不要导入父模块'。你救了我,不再挠我的脑袋,而是绕着圈子跑来跑去。 – fossil
对不起。下面是一个问题:http://*.com/questions/39131350/nesting-angular2-rc5-routes-multiple-files –