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

不少 Angular 初学者在学习 Angular 路由框架时,对 forRootforChild 这两个方法的差异都心生疑惑

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}]
    };
}

推荐阅读更多精彩内容