`forRoot()` 方法返回一個 NgModule 及其提供者 Providers 依賴項。

NgModule forRoot() 約定對 Angular 初學者來說是一個奇怪的約定：命名說明了如何使用它，但沒有說明這樣做的使用場景，即為什麼需要以這種方式匯入 NgModule。

一言以蔽之，forRoot 同單例服務相關。當 Angular 服務在某個時間點被載入到頁面時，所有應用程式裡對該服務的注入，都使用這唯一的一個例項。

延遲載入的模組可能會嘗試建立該注入服務的第二個例項，而 forRoot() 方法是一種確保應用程式模組/共享模組/和任何`延遲載入`的模組都使用`相同的` 1 個例項（根例項），從而達成了服務的單例效果。

在本文的示例中，我們共享一個服務，以同步計數器值。 每當應用裡的任何 Component，增加儲存在計數器服務中的值時，我們都期望這個計數器的值更新行為，能夠被所有元件都感知到。

以上的場景在我們引入延時載入的 NgModule 時會遇到挑戰。被延遲載入的元件將無法共享相同的計數器值。 下面的例子僅僅在採取 eager 載入的元件場景中才能正常工作。

僅使用預先載入的元件時，如果您使用共享服務，則下面的示例將起作用，但請注意延遲載入的元件的行為方式。被延遲載入的元件，將獲得單獨的 service 例項。

```typescript
import { NgModule } from '@angular/core';
import { CounterService } from './counter.service';
@NgModule({
  providers: [CounterService],
})
export class SharedModule {}
```

請看我的 StackBlitz [工程](https://stackblitz.com/edit/angular-no-for-root-72x3ht?file=app%2Flazy%2Flazy.component.ts)。

解決方案：在 SharedModule 裡，開發一個 forRoot 方法：

```typescript
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 方法：

```typescript
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 模組和延遲載入模組之間能夠共享。

Angular forRoot 方法的使用場合介紹

相關文章