大佬教程收集整理的这篇文章主要介绍了在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 });
... 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 ] })
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
这是相关的代码:
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,请注明来意。