同 Angular Module 不同，Angular Components 和 Directives 要例項化多次，每個出現在 HTML template 中的 markup 都會對應一次例項化。

此外，這些項的`作用域`也限定在它們被匯入的 NgModule中，以防止兩個元件使用相同的選擇器時發生命名衝突。由於依賴注入(DI)行為的這種差異，需要區分一個包含元件和指令的 `NgModule` 和一個包含元件、指令和 providers 的 `ModuleWithProviders` 是很有幫助的，這正是forRoot()方法進行區分的地方。

下面是 SAP Spartacus 關於 `forRoot` 方法的一個例子：

```typescript
export class SiteContextModule {
  static forRoot(): ModuleWithProviders<sitecontextmodule> {
    return {
      ngModule: SiteContextModule,
      providers: [
        provideDefaultConfigFactory(defaultSiteContextConfigFactory),
        contextServiceMapProvider,
        ...contextServiceProviders,
        ...siteContextParamsProviders,
        provideConfigValidator(baseSiteConfigValidator),
        {
          provide: CONFIG_INITIALIZER,
          useFactory: initSiteContextConfig,
          deps: [SiteContextConfigInitializer, SiteContextConfig],
          multi: true,
        },
        ...contextInitializerProviders,
      ],
    };
  }
}
```

然而，依賴注入並不總是這麼簡單。有些時候，應用程式的所有ngmodule在引導過程中都不可用。延遲載入就是這樣一個例子。當在路由過程中惰性載入NgModule時，在惰性載入的NgModule中註冊的提供商及其子模組在引導過程中不可用，Angular 那時無法註冊它們。因此，它們只有在載入路由時才會被新增為提供商，而且它們的作用域會從惰性載入的NgModule及其子模組開始注入。如果有多個惰性載入 NgModule 試圖註冊相同的提供商，那麼 NgModule 樹中的每個節點最終都會擁有不同的例項。透過在根目錄下匯入提供商，它有助於確保所有惰性載入的 ngmodule 都能獲得該提供商的同一個例項，這也是forRoot() 被命名為該例項的原因。

![](https://img-blog.csdnimg.cn/img_convert/57983c28ae2b6c73762b943de66124d6.png)

# 總結

何時使用 Module 的 forRoot 方法？簡言之，當一個庫的 dependency 需要某個 module 時，就呼叫該 module 的 forRoot 方法，達到全域性(`globally`)匯入 providers 的目的。

在其他 ngmodule中，必要時使用 import 的非根形式來匯入元件和指令。

當一個特性 NgModule 匯出的元件和指令需要共享相同的自定義提供商例項時，請考慮用forRoot()方法在根NgModule中註冊這些提供商。這有助於確保所有子ngmodule都能訪問相同的提供商例項，而不需要使用者顯式地處理提供商註冊。</sitecontextmodule>

關於 Angular 應用 Components 和 Directives 的例項化問題

相關文章