在 Angular 開發中，我們經常遇到一個 NgModule 在匯入時需要呼叫它的靜態 forRoot 方法。，最值得注意的例子是 RouterModule. 當在 Angular 應用的根目錄註冊這個模組時，匯入RouterModule的方式如下:

```typescript
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
    { path: '',   redirectTo: '/index', pathMatch: 'full' }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  ...
})
export class AppModule { }
```

這個約定在 `ngx-bootstrap` 中也使用過，以前在 `Angular Material` 中也使用過。這種約定意味著，給定的模組必須在呼叫 forRoot()方法時，註冊到應用程式的根 NgModule 中。這個方法有什麼特別之處，以至於它需要在應用程式的根目錄呼叫，而不是在其他NgModule中呼叫?

對於初學者來說，forRoot() 約定返回什麼?通常，這個方法的返回型別是一個符合`ModuleWithProviders` 介面的`物件`。這個介面是一個可接受的NgModule匯入介面，它有兩個屬性:

```typescript
interface ModuleWithProviders { 
  ngModule: Type<any>
  providers: Provider[]
}
```

forRoot() 方法會返回一個 NgModule 及其依賴的提供商。這和根 NgModule 有什麼關係?也許什麼都沒有。事實上，儘管這種約定意味著它必須在應用的根模組處匯入，但在很多情況下，你可以在非根模組中匯入它，它也能工作。

下面是 ModalModule 在ngx-bootstrap中使用forRoot()約定的方式:

```typescript
import { NgModule, ModuleWithProviders } from '@angular/core';

import { ModalBackdropComponent } from './modal-backdrop.component';
import { ModalDirective } from './modal.component';
import { PositioningService } from '../positioning';
import { ComponentLoaderFactory } from '../component-loader';

@NgModule({
  declarations: [ModalBackdropComponent, ModalDirective],
  exports: [ModalBackdropComponent, ModalDirective],
  entryComponents: [ModalBackdropComponent]
})
export class ModalModule {
  public static forRoot(): ModuleWithProviders {
    return {ngModule: ModalModule, providers: [ComponentLoaderFactory, PositioningService]};
  }
}
```

儘管從理論上講，匯入forRoot()方法的額外提供程式。在子ngmodule中是可行的，但將它註冊到應用程式的根目錄，在很多方面都有幫助。

首先，考慮 providers 的注入方式與元件和指令有何不同。通常，當用@Injectable裝飾一個類並在NgModule中註冊為提供商時，這個類只建立一次，並且這個例項會在整個應用中 共享。當Angular引導根模組時，所有NgModule中所有可用的匯入都會在那時註冊，並對整個應用都可用——它們是全域性的。這就是為什麼註冊在子NgModule中的提供商在整個應用中都是可用的。</any>

關於 Angular 應用 Module 的 forRoot 方法的討論

相關文章