Question

我正在使用带有几个模块的角度5开发一些大型应用程序。每个模块都加载为Angular 5的延迟加载机制。我在这些模块之间共享组件，它们工作正常。但是我遇到了加载模块root的问题，如下所示。

应用模块路由

export const routes: Routes = [

  { path: '', component: MenuComponent },
  { path: 'logout', component: LogoutComponent },
  { path: 'admin', loadChildren: 'app/modules/admin/admin.module#AdminModule' },
  { path: 'sample', loadChildren: 'app/modules/sample/sample.module#SampleModule' },
  { path: 'membership', loadChildren: 'app/modules/membership/membership.module#MembershipModule' },
  { path: 'class', loadChildren: 'app/modules/class/class.module#ClassModule' },

  { path: '**', component: PageNotFoundComponent }

];

我在AdminModule中的ClassModule中共享组件。

课程模块

@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    ClassRoutingModule,
    FormsModule,
    ReactiveFormsModule
  ],
  declarations: [
    ClassRoutingComponents,
    ClassHomeComponent,
    ClassListComponent,
    ClassCalendarComponent,
    AddNewCalssComponent,
    ClassScheduleComponent
  ],
  exports: [
    ClassRoutingComponents,
    ClassHomeComponent,
    ClassListComponent,
    AddNewCalssComponent,
    ClassScheduleComponent
  ],
  providers: [

  ]
})
export class ClassModule {}

AdminModule导入了ClassModule，如下所示。

@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    FormsModule,
    ClassModule
  ],
  declarations: [
    AdminRoutingComponents,
    .......
  ],
  providers:
    [
      AdminService,

    ]
})

export class AdminModule { }

班级路线

const routes: Routes = [
  { path: '', component: ClassHomeComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

管理员路由

const routes: Routes = [
  { path: '', component: AdminHomeComponent },
  { path: 'settings', component: SettingsComponent },
...
}

每个组件的共享工作都很好，但我的问题是当我路由到http://localhost:4200/admin时，它会ClassHomeComponent，但必须加载AdminHomeComponent

Answer 1

ClassModule导入ClassRoutingModule，而AdminModule导入ClassModule。

因此，当您懒惰地加载AdminModule（通过loadChildren: 'app/modules/admin/admin.module#AdminModule'）时，路由器首先从ClassModule引入路由，并尊重它们。因此，您的/admin路由正在加载为ClassRoutingModule（ClassHomeComponent）中的root定义的组件。

延迟加载的模块之间的Angular 5共享组件破坏了路由

1 个答案: