Angular forRoot 方法的使用场合介绍

举报
Jerry Wang 发表于 2023/01/08 10:05:26 2023/01/08
【摘要】 NgModule forRoot() 约定对 Angular 初学者来说是一个奇怪的约定:命名说明了如何使用它,但没有说明这样做的使用场景,即为什么需要以这种方式导入 NgModule。

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 模块和延迟加载模块之间能够共享。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200