Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了在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

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

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

我受到了欢迎

但是,我可以进入

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.

大佬总结

以上是大佬教程为你收集整理的在Angular 2 RC5 / Router 3 RC1中路由嵌套模块全部内容,希望文章能够帮你解决在Angular 2 RC5 / Router 3 RC1中路由嵌套模块所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。