当前位置: 首页 > Web前端 > JavaScript

关于在 Angular 应用里重复调用 RouterModule.forRoot(ROUTES) 的讨论

时间:2023-03-26 22:46:31 JavaScript

关于在Angular应用程序中重复调用RouterModule.forRoot(ROUTES)的讨论结果。仅在根应用程序模块AppModule中调用forRoot,在任何其他模块中调用它,尤其是在延迟加载的模块中,违反了Angular路由模块的设计意图,并且可能会产生运行时错误。确保导入forRoot方法的结果,而不是将其添加到任何其他@NgModule列表中。每个应用程序都有一个起点(根),主要路由服务应使用forRoot初始化,而特定“子”功能的路由应额外注册到forChild。这对于不必在应用程序启动时加载的子模块和延迟加载模块很有用,相当于Angular开发人员被告知重用RouterService而不是注册新服务,这可能会导致运行时错误。forRoot静态方法是您为Angular应用程序配置根路由模块的方式。当我们调用RouterModule.forRoot(routes)时,我们要求Angular在全局实例化Router类的一个实例。就像Angular新建一个基础AppModule来导入开发者定义的所有功能模块一样,它也提供了AppRoutingModule来导入我们在应用中定义的所有子路由。在开发人员通过AngularCLI创建的新应用程序中,forRoot方法实际上已经在app-routing.module.ts中使用。forRoot方法在整个Angular应用中只能使用一次,因为这个方法告诉Angular在后台实例化Router类的一个实例,应用中只能有一个路由器。RouterModule.forChild(routes)当开发人员使用forChild静态方法时,我们基本上是在告诉Angular,“应用程序中已经有一个Router实例可用,因此请向该实例注册所有这些路由。”forChild静态方法很有用,因为它通过允许我们在应用程序中保持关注点分离来发挥Angular模块功能的核心部分。假设我们想在我们的应用程序中为用户设置创建一个新的功能模块,这个功能将包含一些路由。将这些路由直接添加到AppRoutingModule中并不是一个好的设计,随着应用程序规模的增长,它最终会变得难以维护。您可以使用forChild方法在您的应用程序中保持关注点分离。首先,创建一个新的UserSettingsRoutingModule:UserProfileComponent}来自'./user-profile/user-profile.component';constroutes:Routes=[{path:'settings',component:UserSettingsComponent,children:[{path:'profile',component:UserProfileComponent}]}];@NgModule({imports:[RouterModule.forChild(routes)],exports:[RouterModule]})exportclassUserSettingsRoutingModule{}注意上面forChild方法的使用。因为已经使用了forRoot方法,现在只需要将子路由注册到实例化的应用路由器即可。之后创建UserSettingsModule:import{NgModule,CommonModule}from'@angular/core';import{UserSettingsRoutingModule}from'./user-settings-routing.module';@NgModule({imports:[CommonModule,UserSettingsRoutingModule],//配置你模块的其余部分在这里})exportclassUserSettingsModule{}