加载 Angular 2 模块作为子路由答案

【问题标题】：Loading Angular 2 module as child route加载 Angular 2 模块作为子路由
【发布时间】：2017-01-07 00:01:16
【问题描述】：

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

我希望 EducationModule 中定义的路由加载到 AuthenticatedComponent 中定义的路由器插座中，但它们正在根 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);

【问题讨论】：

标签： angular

【解决方案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);

【讨论】：