Angular-如何使用"forRoot"将配置传递给另一个模块加载的模块

Question

我正努力想办法解决这个注入问题。

我有需要令牌的ModuleA(mapbox(和导入ModuleA的ModuleB。

问题是ModuleB是一个库模块，因此应该对其进行配置。所以我想让最终用户能够做这样的事情：

ModuleB.forRoot({mapboxToken: 'some-token'});

在引擎盖下，ModuleB应该将该令牌传递给ModuleAwithConfig方法。现在我必须在ModuleB中执行此操作。

imports: [ModuleA.withConfig({token: 'some hardcoded token'});

关于如何以正确的角度方式做到这一点，有什么建议吗？

Answer 1

自行解决

对于任何感兴趣的人来说，以下是我的做法：

import { NgxMapboxGLModule, MAPBOX_API_KEY } from 'ngx-mapbox-gl';
export interface IWVMapModuleConfig {
mapboxToken: string;
}
export const WVMapModuleConfig = new InjectionToken<IWVMapModuleConfig>('IWVMapModuleConfig');
@NgModule({
declarations: [],
exports: [],
imports: [
CommonModule,
NgxMapboxGLModule,
],
})
export class WVMapModule {
static forRoot(config: IWVMapModuleConfig): ModuleWithProviders<WVMapModule> {
return {
ngModule: WVMapModule,
providers: [
{
provide: MAPBOX_API_KEY,
useValue: config.mapboxToken,
},
],
};
}
}

然后在应用程序根模块中：

...
imports: [
CommonModule,
...
WVMapModule.forRoot({
mapboxToken: 'your-token-here'
})
]
...

Answer 2

对我来说，我有3个不同的分层库和一个顶级应用程序。每个层都必须向顶层配置对象添加一些层配置。我使用了以下方法。

DI是首先设置的，每个层都会覆盖其较低层的配置(使用{ provide: ..., useExisting: ... }(，因此当在每个模块上调用构造函数时，它们将获得相同的配置对象。构造函数是我添加特定于层的配置的地方。

// MY APP MODULE
const config: ModuleCConfig = {
api: "/my-api",
}
@NgModule({
imports: [
ModuleC.forRoot()
],
providers: [
{ provide: ModuleCConfig, useValue: config }
]
})
export class AppModule { }

// MODULE C
export class ModuleCConfig : ModuleBConfig {
// Addition properties...
}
@NgModule({
imports: [
ModuleB.forRoot(),
]})
export class ModuleC {
constructor(config: ModuleCConfig){
// Add additional info to the top level config
}

static forRoot(): ModuleWithProviders<ModuleC> {
return {
ngModule: ModuleC,
providers: [
{ provide: ModuleBConfig, useExisting: ModuleCConfig },
],
};
}
}

// MODULE B
export class ModuleBConfig : ModuleAConfig {
// Addition properties...
}
@NgModule({
imports: [
ModuleA,
]})
export class ModuleB {
constructor(config: ModuleBConfig){
// Add additional info to the top level config
}

static forRoot(): ModuleWithProviders<ModuleB> {
return {
ngModule: ModuleB,
providers: [
{ provide: ModuleAConfig, useExisting: ModuleBConfig },
],
};
}
}

// MODULE A
export class ModuleAConfig {
api: string;
}
@NgModule({})
export class ModuleA {
constructor(config: ModuleAConfig){
// Add additional info to the top level config
}
}