将Angular 2模块加载为子路径

时间:2016-08-30 15:44:32

标签: angular

我创建了一个ngModule(EducationModule),它加载了一组导航项和子路由,这些路由加载到模块中定义的根组件(EducationComponent)中定义的路由器插座中。除了我希望模块中定义的功能是另一个组件(AuthenticatedComponent)的子路由之外,一切都工作得很好。换句话说,我希望模块中定义的路由作为子路由附加到根级别定义的路由。这可能是使用路由器3吗?

我希望在Educationized模块中定义的路由器插座中加载在EducationModule中定义的路由,但是它们将被加载到根AppComponent模板中的路由器插座中。请参阅下面的路线定义。

app.routes.ts - AppModule中加载的主要路线

{
    path: '', component: AuthenticatedComponent, canActivate: [AuthGuard],
    children: [
      {
        path: 'profile/education',
        loadChildren: 'app/modules/education/education-module#EducationModule'
      },

education.routing.ts - EducationModule中的路线

const educationRoutes: Routes = [
  {
    path: 'profile/education',
    component: EducationComponent,
    children: [
      { path: '', component: WebinarsComponent },
      { path: 'webinars', component: WebinarsComponent },
      { path: 'programs', component: ProgramsComponent },
      {
        path: 'courses',
        component: CoursesComponent,
        resolve: {
          courses: CoursesResolve
        }
      }
    ]
  }
];

export const educationRouting: ModuleWithProviders = RouterModule.forChild(educationRoutes);

1 个答案:

答案 0 :(得分:2)

我认为educationRoutes中的第一条路线不应该包含个人资料/教育前缀,因为它已经存在于其父级(来自AppModule的路线)。

我通常使用与您描述的相同的方案,但它确实有效。

试试这个:

const educationRoutes: Routes = [{
    path: '' // prefix is already specified in AppModule,
    component: EducationComponent,
    children: [
      { path: '', component: WebinarsComponent },
      { path: 'webinars', component: WebinarsComponent },
      { path: 'programs', component: ProgramsComponent },
      {
        path: 'courses',
        component: CoursesComponent,
        resolve: {
          courses: CoursesResolve
        }
      }
    ]
  }
];

export const educationRouting: ModuleWithProviders = RouterModule.forChild(educationRoutes);