[英]Routing for nested modules in Angular 2 RC5/Router 3 RC1
假设我有以下设置:
employee -------+ employee.module.ts
| employee.routing.ts
+ employee.component.ts
|
sales ----------+ sales.module.ts
| sales.routing.ts
+ sales.component.ts
app.module.ts
app.routing.ts
app.component.ts
我希望自己的路线看起来像
employee/14/sales
因此,我继续定义以下路由声明:
应用程序路由
...
import { AppComponent } from './app.component';
const appRoutes: Routes = [
{ path: '', component: AppComponent }
];
export const appRoutingProviders: any[] = [];
export const routing = RouterModule.forRoot(appRoutes, { useHash: true });
员工路由
...
import { EmployeeComponent } from './employee.component';
export const employeeRoutes: Routes = [
{ path: 'employee/:id', component: EmployeeComponent }
];
export const employeeRouting = RouterModule.forChild(employeeRoutes);
销售路由
...
import { SalesComponent } from './sales.component';
export const salesRoutes: Routes = [
{ path: 'sales', component: SalesComponent }
];
export const salesRouting = RouterModule.forChild(salesRoutes);
而我的模块采用以下形式:
app.module.ts
import { EmployeeModule } from './employee/employee.module';
import { AppComponent } from './app.component';
import {
routing,
appRoutingProviders
} from './app.routing';
@NgModule({
imports: [
...
EmployeeModule,
routing
],
declarations: [
AppComponent
],
bootstrap: [
AppComponent
],
providers: [
appRoutingProviders
]
})
employee.module.ts
import { SalesModule } from '../sales/sales.module';
import { EmployeeComponent } from './employee.component';
import { employeeRouting } from './employee.routing';
@NgModule({
imports: [
SalesModule,
employeeRouting
],
declarations: [
EmployeeComponent
]
})
sales.module.ts
import { SalesComponent } from './sales.component';
import { salesRouting } from './sales.routing';
@NgModule({
imports: [
salesRouting
],
declarations: [
SalesComponent
]
})
export class SalesModule {}
我现在可以移至
employee/14
但是如果我尝试导航到
employee/14/sales
我受到了欢迎
错误:无法匹配任何路线:“ employee / 14 / sales”
但是我可以输入
sales
并且它在不应该起作用的情况下起作用,因此,所有路由都以某种方式直接连接到/
而不是彼此建立。
我想念什么?
演示问题的EDIT plnkr可以在这里找到。
我最终得到了这个工作。 关键的概念是不包括employeeRoutes
从employee.routing.ts
(因为这将增加从东西EmployeeModule
到AppModule
以s声明和结果又一个错误消息),而是创建另一个employeeRoutes
内app.routing.ts
即会延迟加载EmployeeModule
导航到航线开始with`时
/employee
以下是相关代码:
import {
RouterModule,
Routes
} from '@angular/router';
import { AppComponent } from './app.component';
const employeeRoutes: Routes = [
{
path: 'employee',
loadChildren: 'app/employee/employee.module#EmployeeModule'
}
];
const appRoutes: Routes = [
{ path: '', redirectTo: 'welcome', pathMatch: 'full' },
...employeeRoutes
];
export const appRoutingProviders: any[] = [];
export const routing = RouterModule.forRoot(appRoutes, { useHash: true });
完整的plnkr可以在这里找到。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.