将Angular 2模块作为子路径加载

Question

我创建了一个ngModule（EducationModule），用于加载一组导航项和子路由，加载到模块中定义的根组件（EducationComponent）中定义的路由器出口。除了我希望模块中定义的功能是另一个组件（AuthenticatedComponent）的子路由之外，一切都很好。换句话说，我希望模块中定义的路由作为子路由附加到在根级定义的路由。这可能使用路由器3？

我想要将在EducationModule中定义的路由加载到在AuthenticatedComponent中定义的router-outlet中，但它们正在加载到根AppComponent模板中的router-outlet中。请参阅下面的路线定义。

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); 

Answer 1

我想在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);