Angular 2 RC5/Router 3 RC1 中嵌套模块的路由

Question

假设我有以下设置：

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

所以我继续定义这些路由声明：

app.routing.ts

...
import { AppComponent } from './app.component';

const appRoutes: Routes = [
    { path: '', component: AppComponent }
];

export const appRoutingProviders: any[] = [];
export const routing = RouterModule.forRoot(appRoutes, { useHash: true });

employee.routing.ts

...
import { EmployeeComponent } from './employee.component';

export const employeeRoutes: Routes = [
    { path: 'employee/:id', component: EmployeeComponent }  
];

export const employeeRouting = RouterModule.forChild(employeeRoutes);

sales.routing.ts

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

我受到欢迎

Error: Cannot match any routes: 'employee/14/sales'

不过我可以输入

sales

这在它不应该工作的时候工作，所以不知何故所有的路线都直接连接到 / 而不是建立在彼此之上。

我错过了什么？

EDIT plnkr 可以找到演示问题的 here.

Answer 1

我最终成功了。关键思想是不要包含 employee.routing.ts 中的 employeeRoutes（因为这会将 EmployeeModule 中的内容添加到 AppModule 的声明中，并导致另一条错误消息），而是创建app.routing.ts 内的另一个 employeeRoutes 将在导航到以`

开头的路线时延迟加载 EmployeeModule

/employee

Angular 2 RC5/Router 3 RC1 中嵌套模块的路由

Routing for nested modules in Angular 2 RC5/Router 3 RC1

angular2-routing

angular2-router3

angular