乐趣区

关于前端:Angular-forRoot-方法的使用场合介绍

jiezi

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 模块和提早加载模块之间可能共享。

退出移动版