在延遲載入模組中呼叫 [forRoot](https://stackoverflow.com/questions/40498081/routermodule-forrootroutes-vs-routermodule-forchildroutes)，後果是將在`延遲載入模組注入器`中建立所有全域性服務的新例項，這將導致不可預知的結果。

僅在根應用程式模組 AppModule 中呼叫 forRoot, 在任何其他模組中呼叫它，尤其是在延遲載入的模組中，是違背 Angular 路由模組的設計本意的，並且可能會產生執行時錯誤。

確保匯入 forRoot 方法的結果，而不要將它新增到任何其他@NgModule 列表中。

每個應用程式都有一個起點（根），主路由服務應該用 forRoot 初始化，而特定“子”功能的路由應該用 forChild 額外註冊。這對於不必在應用程式啟動時載入的子模組和延遲載入模組非常有用，相當於 Angular 開發人員被告知重用 RouterService 而不是註冊新服務，後者可能會導致執行時錯誤。

forRoot 靜態方法是為 Angular 應用程式配置根路由模組的方法。 當我們呼叫 RouterModule.forRoot(routes) 時，意思是在要求 Angular 在全域性例項化 Router 類的一個例項。 就像 Angular 建立一個新的基礎 AppModule 來匯入開發人員定義的所有的功能模組一樣，它也提供了 AppRoutingModule 來匯入我們在應用程式裡定義的所有子路由。

在開發人員透過 Angular CLI 建立的新應用程式中，forRoot 方法實際上已經在 app-routing.module.ts 中使用。 在整個 Angular 應用程式中，只能使用一次 forRoot 方法，這是因為此方法告訴 Angular 在後臺例項化 Router 類的例項，並且應用程式中只能有一個路由器。

# RouterModule.forChild(routes)

當開發人員使用 forChild 靜態方法時，我們基本上是在告訴 Angular，“應用程式中已經有一個 Router 例項可用，所以請向該例項註冊所有這些路由。”

forChild 靜態方法很有用，因為它透過允許我們在應用程式中保持關注點分離來發揮 Angular 模組功能的核心部分。

假設我們想在應用程式中為使用者設定建立一個新的功能模組，這個功能將包含一些路由。將這些路由直接新增到 AppRoutingModule 中不是一個好的設計，這最終會隨著應用程式的規模增長而變得難於維護。可以使用 forChild 方法在應用程式中保持關注點分離。 首先，建立一個新的 UserSettingsRoutingModule：

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

import { UserSettingsComponent } from './user-settings.component';
import { UserProfileComponent } from  './user-profile/user-profile.component';

const  routes:  Routes  = [
    {
        path:  'settings',
        component:  UserSettingsComponent,
        children: [
            {
                path:  'profile',
                component: UserProfileComponent 
            }
        ]
    }
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export  class  UserSettingsRoutingModule { }
```

注意上面 forChild 方法的使用。 因為已經使用了 forRoot 方法，所以現在只需要將子路由註冊到已經例項化的應用程式路由器。

之後建立 UserSettingsModule：

```typescript
import { NgModule, CommonModule } from  '@angular/core';
import { UserSettingsRoutingModule } from  './user-settings-routing.module';

@NgModule({
    imports: [
        CommonModule,
        UserSettingsRoutingModule
    ],
    // Configure the rest of your module here
})
export class UserSettingsModule { }
```

關於在 Angular 應用裡重複呼叫 RouterModule.forRoot(ROUTES) 的討論

相關文章