不少 Angular 初学者在学习 Angular 路由框架时，对 forRoot 和 forChild 这两个方法的差异都心生疑惑。
Angular 官网对两个方法的解释：
- forRoot 创建一个包含所有指令、给定路由和路由器服务本身的模块。
- forChild 创建一个包含所有指令和给定路由的模块，但不包含路由器服务。
但缺乏具体的例子。
Module with providers
当我们导入模块时，通常使用的是对模块类的引用。
例子：
@NgModule({ providers: [AService] }) export class A {} ----------------------------------- @NgModule({ imports: [A] }) export class B
通过这种方式，所有在模块 A 上注册的 Service Providers 都将被添加到根注入器中，并可用于整个应用程序。
另一种方式也能工作：
@NgModule({ providers: [AService] }) class A {} export const moduleWithProviders = { ngModule: A, providers: [AService] }; ---------------------- @NgModule({ imports: [moduleWithProviders] }) export class B
我们知道延迟加载模块有自己的注入器。 因此，假设我们要注册 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
这样一来，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
当我们通过同一个 injection token 获得 Service 的引用实例时，事情就变得更有趣了。
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），所以它对延迟加载的子模块使用不同的配置：
static forChild(routes: Routes): ModuleWithProviders { return { ngModule: RouterModule, providers: [{provide: ROUTES, multi: true, useValue: routes}] }; }
