angular - RouterModule.forRoot(ROUTES) 与 RouterModule.forChild(ROUTES)

Question

这两者之间有什么区别，各自的用例是什么？

docs不是很有帮助:

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

forChild creates a module thatcontains all the directives and the given routes, but does not includethe router service.

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

Answer 1

我强烈建议阅读这篇文章:

• Avoiding common confusions with modules in Angular

提供者模块

当你导入一个模块时，你通常使用对模块类的引用:

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

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

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

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

但是还有另一种方法可以像这样向提供者注册模块:

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

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

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

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

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

您可能知道延迟加载模块有自己的注入(inject)器。因此，假设您要注册 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

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

您可以像这样将上面的内容重写为导出模块:

@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 有什么关系？假设它们都使用相同的 token 访问:

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

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

当您从延迟加载模块请求 token 时，通过单独的配置，您将按计划获得 BService。

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

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