不少 Angular 初學者在學習 Angular 路由框架時，對 `forRoot` 和 `forChild` 這兩個方法的差異都[心生疑惑](https://stackoverflow.com/questions/40498081/routermodule-forrootroutes-vs-routermodule-forchildroutes)。

Angular 官網對兩個方法的解釋：

- forRoot 建立一個包含所有指令、給定路由和路由器服務本身的模組。

- forChild 建立一個包含所有指令和給定路由的模組，但不包含路由器服務。

但缺乏具體的例子。

# Module with providers

當我們匯入模組時，通常使用的是對模組類的引用。

例子：

```typescript
@NgModule({
    providers: [AService]
})
export class A {}

-----------------------------------

@NgModule({
    imports: [A]
})
export class B
```

透過這種方式，所有在模組 A 上註冊的 Service Providers 都將被新增到`根注入器中`，並可用於整個應用程式。

另一種方式也能工作：

```typescript
@NgModule({
    providers: [AService]
})
class A {}

export const moduleWithProviders = {
    ngModule: A,
    providers: [AService]
};

----------------------

@NgModule({
    imports: [moduleWithProviders]
})
export class B
```

我們知道延遲載入模組有自己的注入器。 因此，假設我們要註冊 AService 以供整個應用程式使用，但某些 BService 僅可用於延遲載入的模組。 可以像這樣重構模組：

```typescript
@NgModule({
    providers: [AService]
})
class A {}

export const moduleWithProvidersForRoot = {
    ngModule: A,
    providers: [AService]
};

export const moduleWithProvidersForChild = {
    ngModule: A,
    providers: [BService]
};

------------------------------------------

@NgModule({
    imports: [moduleWithProvidersForRoot]
})
export class B
    
// lazy loaded module    
@NgModule({
    imports: [moduleWithProvidersForChild]
})
export class C
```
這樣一來，Service B 將僅對子延遲載入模組可用，而 Service A 將對整個應用程式可用。

上述程式碼可以進一步重構為：

```typescript
@NgModule({
    providers: [AService]
})
class A {
    forRoot() {
        return {
            ngModule: A,
            providers: [AService]
        }
    }

forChild() {
        return {
            ngModule: A,
            providers: [BService]
        }
    }
}

--------------------------------------

@NgModule({
    imports: [A.forRoot()]
})
export class B

// lazy loaded module
@NgModule({
    imports: [A.forChild()]
})
export class C
```

當我們透過同一個 injection token 獲得 Service 的引用例項時，事情就變得更有趣了。

```typescript
export const moduleWithProvidersForRoot = {
    ngModule: A,
    providers: [{provide: token, useClass: AService}]
};

export const moduleWithProvidersForChild = {
    ngModule: A,
    providers: [{provide: token, useClass: BService}]
};
```
當從延遲載入的模組使用單獨的配置來請求 token 時，我們將獲得 Service B 的例項引用。

RouterModule 使用 ROUTES 令牌獲取特定於模組的所有路由。 因為它希望特定於延遲載入模組的路由在該模組內可用（類似於我們之前討論的 Service B），所以它對延遲載入的子模組使用不同的配置：

```typescript
static forChild(routes: Routes): ModuleWithProviders {
    return {
        ngModule: RouterModule, 
        providers: [{provide: ROUTES, multi: true, useValue: routes}]
    };
}
```

Angular RouterModule.forRoot(ROUTES) 和 forChild(ROUTES)的區別

相關文章