Question

我创建了一个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);

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

将Angular 2模块加载为子路径

1 个答案: