RouterModule.forRoot(ROUTES)与RouterModule.forChild(ROUTES) [英] RouterModule.forRoot(ROUTES) vs RouterModule.forChild(ROUTES)

问题描述

这两个之间有什么区别，每个都有用例?

What is the differences between these two and what are the use cases for each?

文档并不完全是有用的:

forRoot创建一个包含所有指令的模块，给定 路由以及路由器服务本身.

forRoot creates a module that contains all the directives, the given routes, and the router service itself.

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

forChild creates a module that contains all the directives and the given routes, but does not include the router service.

我模糊的猜测是，一个用于主"模块，另一个用于任何导入的模块(因为它们已经可以从主模块获得服务了)，但是我真的不能想到用例

My vague guess is that one is for the 'main' module and the other is for any imported modules (since they would already have the service available from the main module), but I can't really think of a use case.

推荐答案

我强烈建议您阅读本文:

I strongly suggest reading this article:

• 避免与Angular中的模块常见混淆

导入模块时，通常使用对模块类的引用:

When you import a module you usually use a reference to the module class:

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

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

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

通过这种方式，在模块A上注册的所有提供程序都将被添加到根注射器，并且可用于整个应用程序.

In this way all providers registered on module A will be added to the root injector and available for the entire application.

但是还有另一种向提供程序注册模块的方法，如下所示:

But there is another way to register a module with providers like this:

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

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

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

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

这与上一个具有相同的含义.

This has the same implications as the previous one.

您可能知道延迟加载的模块具有自己的注入器.因此，假设您要注册AService可供整个应用程序使用，而有些BService则仅适用于延迟加载的模块.您可以像这样重构模块:

You probably know that lazy loaded modules have their own injector. So suppose you want to register AService to be available for the entire application, but some BService to be available to only lazy loaded modules. You can refactor your module like this:

@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

现在BService仅可用于子级延迟加载的模块，而AService可用于整个应用程序.

Now BService will only be available for child lazy loaded modules and AService will be available for the entire application.

您可以将上述内容重写为导出的模块，如下所示:

You can rewrite the above as an exported module like this:

@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

与RouterModule有什么关系?

假设它们都使用相同的令牌访问:

How is that relevant to RouterModule?

Suppose they are both accessed using the same token:

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

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

使用单独的配置，当您从延迟加载的模块中请求token时，将按计划获得BService.

With separate configurations when you request token from a lazy loaded module you will get BService just as planned.

RouterModule使用ROUTES令牌来获取特定于模块的所有路由.由于它希望特定于延迟加载模块的路由在此模块内可用(类似于我们的BService)，因此它对延迟加载的子模块使用了不同的配置:

RouterModule uses ROUTES token to get all routes specific to a module. Since it wants routes specific to lazy loaded module to be available inside this module (analogues to our BService) it uses different configuration for the lazy loaded child modules:

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

这篇关于RouterModule.forRoot(ROUTES)与RouterModule.forChild(ROUTES)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！