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

Question

我正在使用带有多个模块的 Angular 5 开发一些大型应用程序。每个模块都按照 Angular 5 的延迟加载机制进行加载。 我在这些模块之间共享组件，并且它们工作正常。 但我在加载模块根目录时遇到问题，如下所示。

应用模块路由

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 定义的组件