Angular forRoot 方法的使用场合介绍
Angular forRoot 方法的使用场合介绍
Jerry Wang
发布于 2023-01-09 09:30:41
发布于 2023-01-09 09:30:41
forRoot() 方法返回一个 NgModule 及其提供者 Providers 依赖项。
NgModule forRoot() 约定对 Angular 初学者来说是一个奇怪的约定：命名说明了如何使用它，但没有说明这样做的使用场景，即为什么需要以这种方式导入 NgModule。
一言以蔽之，forRoot 同单例服务相关。当 Angular 服务在某个时间点被加载到页面时，所有应用程序里对该服务的注入，都使用这唯一的一个实例。
延迟加载的模块可能会尝试创建该注入服务的第二个实例，而 forRoot() 方法是一种确保应用程序模块/共享模块/和任何延迟加载的模块都使用相同的 1 个实例（根实例），从而达成了服务的单例效果。
在本文的示例中，我们共享一个服务，以同步计数器值。 每当应用里的任何 Component，增加存储在计数器服务中的值时，我们都期望这个计数器的值更新行为，能够被所有组件都感知到。
以上的场景在我们引入延时加载的 NgModule 时会遇到挑战。被延迟加载的组件将无法共享相同的计数器值。 下面的例子仅仅在采取 eager 加载的组件场景中才能正常工作。
仅使用预先加载的组件时，如果您使用共享服务，则下面的示例将起作用，但请注意延迟加载的组件的行为方式。被延迟加载的组件，将获得单独的 service 实例。
import { NgModule } from '@angular/core';
import { CounterService } from './counter.service';
@NgModule({
providers: [CounterService],
})
export class SharedModule {}请看我的 StackBlitz 工程。
解决方案：在 SharedModule 里，开发一个 forRoot 方法：
import { NgModule,ModuleWithProviders } from '@angular/core';
import { CounterService } from './counter.service';
@NgModule({
})
export class SharedModule {
static forRoot(): ModuleWithProviders {
return {
ngModule: SharedModule,
providers: [ CounterService ]
}
}
}然后在 AppModule 里调用这个 forRoot 方法：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SharedModule } from './shared/shared.module';
import { AppComponent } from './app.component';
import { EagerComponent } from './eager.component';
import { routing } from './app.routing';
@NgModule({
imports: [
BrowserModule,
SharedModule.forRoot(),
routing
],
declarations: [
AppComponent,
EagerComponent
],
bootstrap: [AppComponent]
})
export class AppModule {}现在，计数器服务在 Eager Loaded 模块和延迟加载模块之间能够共享。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2023-01-08，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读