Angular forRoot 与 Services

Photo by Jaanus Jagomägi on Unsplash

在Angular中,

常常会看到在 AppModule 中调用某个模块的 forRoot 方法。

其中最常见的应该就是 RouterModule.forRoot()。

但是 forRoot 的作用是什么?什么时候要自己编写 forRoot?

读完本文,

相信你会有一个答案。

forRoot 解决的问题

forRoot 方法主要是为了解决依赖注入(DI)实例生成的问题。

《 Angular Module 作用域 》中曾经提到,

惰性加载的模块会单独生成一个依赖注入的实例。

这在某些场景下可能不是你想要的。

一个 CountService

假如你想创建一个全局计数的 CountService,

然后你又采用惰性加载的方式来加载包含此 service 的模块,

那么由于惰性加载的模块拥有的 CountService 实例,

和正常加载的模块所拥有的 CountService 实例不相同。

那么就可能导致计数的值出现不一致。

Chris House 写了这样一个 Demo ,可以帮助我们更好地理解这个场景。

可以清楚的看到惰性加载的模块和主模块依赖注入的并不是同一个实例,

因此,累计计数的结果不一致。

在这种场景下,就要使用 forRoot 来生成全局唯一的 service。

forRoot 如何写

若你想让某个 CoreModule 中的 services ,

能够在应用程序的全局生命周期中使用。

那么可以给 CoreModule 添加一个名为 forRoot 的静态方法。

并返回一个 ModuleWithProviders 对象。

import { NgModule, ModuleWithProviders } from '@angular/core';
import { SomeService } from './some.service';

@NgModule({
  ...
})
export class CoreModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: CoreModule,
      providers: [ SomeService ]
    };
  }
}

然后你只要在应用的 AppModule 中 imports 这个 CoreModule,

就能在应用生命周期的全局,无论子模块是否是惰性加载,

共用这个全局的 service 实例。

相关阅读

Angular Module 作用域

参考链接

When to use Angular’s forRoot() method

使用 forRoot() 幫助 SharedModule 提供單一實例服務

Defining Providers in Shared Modules in Angular

发表评论

电子邮件地址不会被公开。 必填项已用*标注