forRoot()方法返回一个NgModule及其提供者Providers依赖项。NgModuleforRoot()约定对于Angular初学者来说是一个奇怪的约定：命名说明了如何使用它，但没有说明这样做的用例，即为什么NgModule需要以这种方式导入。简而言之，forRoot与单例服务有关。当Angular服务在某个时间点加载到页面中时，应用程序中该服务的所有注入都使用这个单一实例。延迟加载的模块可能会尝试创建该注入服务的第二个实例，而forRoot()方法是一种确保应用程序模块/共享模块/和任何延迟加载的模块使用相同的1个实例（根实例）的方法，从而达到服务的单例效果。在本文的示例中，我们共享一个服务来同步计数器值。每当应用程序中的任何组件增加存储在计数器服务中的值时，我们都希望所有组件都能感知到该计数器的值更新行为。当我们引入延迟加载NgModule时，上述场景会遇到挑战。延迟加载的组件将无法共享相同的计数器值。下面的例子只有在预加载的组件场景下才会正常工作。当仅使用预加载组件时，如果您使用共享服务，下面的示例将起作用，但请注意延迟加载组件的行为方式。延迟加载的组件将获得一个单独的服务实例。import{NgModule}from'@angular/core';import{CounterService}from'./counter.service';@NgModule({providers:[CounterService],})exportclassSharedModule{}查看我的StackBlitz项目。解决方案：在SharedModule中，开发一个forRoot方法：import{NgModule,ModuleWithProviders}from'@angular/core';从'./counter.service'导入{CounterService}；@NgModule({})exportclassSharedModule{staticforRoot():ModuleWithProviders{return{ngModule:SharedModule,providers:[CounterService]}}}然后在AppModule中调用这个forRoot方法：import{NgModule}from'@angular/core';从'@angular/platform-b??rowser'导入{BrowserModule};从'./shared/shared.module'导入{SharedModule};从'./app.component'导入{AppComponent};从'导入{EagerComponent}。/eager.component';import{routing}from'./app.routing';@NgModule({imports:[BrowserModule,SharedModule.forRoot(),routing],declarations:[AppComponent,EagerComponent],bootstrap:[AppComponent]})exportclassAppModule{}现在，计数器服务可以在预加载模块和延迟加载模块之间共享。
