Angular RouterModule.forRoot(ROUTES) 和 forChild(ROUTES)的区别

不少 Angular 初学者在学习 Angular 路由框架时，对 forRoot 和 forChild 这两个方法的差异都心生疑惑。

Angular 官网对两个方法的解释：

• forRoot 创建一个包含所有指令、给定路由和路由器服务本身的模块。

• forChild 创建一个包含所有指令和给定路由的模块，但不包含路由器服务。

但缺乏具体的例子。

Module with providers

当我们导入模块时，通常使用的是对模块类的引用。

例子：

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

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

@NgModule({
    imports: [A]
})
export class B
1
2
3
4
5
6
7
8
9
10
11

通过这种方式，所有在模块 A 上注册的 Service Providers 都将被添加到根注入器中，并可用于整个应用程序。

另一种方式也能工作：

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

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

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

@NgModule({
    imports: [moduleWithProviders]
})
export class B
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

我们知道延迟加载模块有自己的注入器。 因此，假设我们要注册 AService 以供整个应用程序使用，但某些 BService 仅可用于延迟加载的模块。 可以像这样重构模块：

@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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

这样一来，Service B 将仅对子延迟加载模块可用，而 Service A 将对整个应用程序可用。

上述代码可以进一步重构为：

@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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

当我们通过同一个 injection token 获得 Service 的引用实例时，事情就变得更有趣了。

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

export const moduleWithProvidersForChild = {
    ngModule: A,
    providers: [{provide: token, useClass: BService}]
};
1
2
3
4
5
6
7
8
9

当从延迟加载的模块使用单独的配置来请求 token 时，我们将获得 Service B 的实例引用。

RouterModule 使用 ROUTES 令牌获取特定于模块的所有路由。 因为它希望特定于延迟加载模块的路由在该模块内可用（类似于我们之前讨论的 Service B），所以它对延迟加载的子模块使用不同的配置：

static forChild(routes: Routes): ModuleWithProviders {
    return {
        ngModule: RouterModule, 
        providers: [{provide: ROUTES, multi: true, useValue: routes}]
    };
}
1
2
3
4
5
6