每個 Angular 開發人員在學習路由設計時，都遇到過如下的程式碼：

```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 註冊給定模組。 那為什麼它需要在應用程式的根 module 中呼叫，而不是任何其他 NgModule？

首先，forRoot() 約定返回什麼資料型別？ 通常，此方法的返回型別是符合 `ModuleWithProviders` 介面的物件。 這個介面是一個被接受的 NgModule import 並且有兩個屬性：

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

簡而言之，forRoot() 方法返回一個 NgModule 及其提供者依賴項。 這與根 NgModule 有什麼關係？ 事實上，雖然這個約定暗示著它應用在應用程式的根目錄中匯入，但在許多情況下，我們可以在非根 NgModule 中匯入它，同樣會起作用。

下面是一個例子，ngx-bootstrap 中的 ModalModule 使用 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]};
  }
}
```
注意： ModalModule 沒有在 @NgModule 裝飾器中宣告任何提供者，而是在靜態 forRoot() 方法中宣告。

儘管呼叫 forRoot() 方法理論上可以在子 NgModules 中工作，但在應用程式的根 module 中呼叫 forRoot，能帶來如下收益。當使用 @Injectable 裝飾一個類並在 NgModule 中註冊為提供者時，這個類被`唯一`建立一次，並且一個例項在整個應用程式中 共享。 當 Angular 引導根 NgModule 時，`所有 NgModule` 中的所有可用匯入，都會在那時註冊並可供整個應用程式使用——它們是全域性的。 這就是為什麼在子 NgModule 中註冊的提供程式在整個應用程式中都可用的原因。</any>

從 RouterModule.forRoot 方法說起

相關文章