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

发布时间：2020-12-17 07:11:20 所属栏目：安全来源：网络整理

导读：假设我有以下设置： employee -------+ employee.module.ts | employee.routing.ts + employee.component.ts |sales ----------+ sales.module.ts | sales.routing.ts + sales.component.tsapp.module.tsapp.routing.tsapp.component.ts 而且我希望我的路线

假设我有以下设置：

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

并且它不起作用,所以不知何故所有路线直接连接到/而不是建立在彼此之上.

我错过了什么？

编辑plnkr演示问题可以找到here.

解决方法

我最终得到了这个工作.关键的想法是不要在employee.routing.ts中包含employeeRoutes(因为这会将EmployeeModule中的内容添加到AppModules声明并导致另一条错误消息),而是在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可以找到here.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!