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

我遇到了以下提示：

错误：无法匹配任何路由：'employee/14/sales'

不过，我可以进入以下界面：

sales

这似乎在本不应该工作的情况下起作用了，因此所有路由直接连接到/，而不是在彼此之上构建。

我错过了什么吗？

编辑演示此问题的plnkr可以在此处找到。

- Thorsten Westheider

---

你是如何导航到 employee/14/sales 的？从哪里开始导航？使用 routerLink 吗？如果是的，它所在的组件是哪一个？你是否尝试过使用 /employee/14/sales 代替？ - Günter Zöchbauer

不，我在一个比较大的项目中遇到了这个问题，所以我建立了一个快速的示例应用程序来重现它；在那个示例应用程序中，我只需要在浏览器地址栏中输入类似 http://localhost:3000/#/employee/14/sales 的内容即可。 - Thorsten Westheider

Answer 1

我最终使这个工作起来了。关键思路是不要从employee.routing.ts中包含employeeRoutes（因为那会将EmployeeModule的内容添加到AppModule的声明中并导致另一个错误消息），而是在app.routing.ts中创建另一个employeeRoutes，当导航到以...开头的路由时，它将延迟加载EmployeeModule。

/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可以在这里找到。

- Thorsten Westheider

---

感谢您指出我在https://angular.io/docs/ts/latest/guide/router.html#!#child-routing-component中忽略的正确方向。 - ZZZ