将通用Transloco配置与项目特定变量相结合

Question

我正试图在我的Angular应用程序中实现Transloco，该应用程序由一个库和多个SPA项目组成。我希望在库项目common中有一个全局配置类，并用库无法访问的生产模式变量来扩展它

目前，我有以下工作配置架构：

transloco-common-config.module.ts(在common库中(：

@NgModule()
export class TranslocoCommonConfig implements TranslocoConfig {
public defaultLang = 'en';
public availableLangs: string[] = [];
public reRenderOnLangChange = true;
constructor(private localeService: LocaleService) {
this.availableLangs = this.localeService.getAvailableLanguages();
}
}

我可以成功地在SPA项目特定模块中使用，比如：

@NgModule({
exports: [TranslocoModule],
providers: [
{ provide: TRANSLOCO_CONFIG, useClass: TranslocoCommonConfig },
{ provide: TRANSLOCO_LOADER, useClass: TranslocoHttpLoader },
],
})
export class TranslocoRootModule {
}

可用的语言通过LocaleService正确加载，Transloco按预期在SPA项目中工作。

要在SPA项目中扩展此配置，我的直觉是使用forRoot((模式。我将通用配置模块修改为：

class TranslocoCommonConfigOptions {
productionMode = true;
}
@NgModule()
export class TranslocoCommonConfig implements TranslocoConfig {
public defaultLang = 'en';
public availableLangs: string[] = [];
public reRenderOnLangChange = true;
constructor(private localeService: LocaleService) {
this.availableLangs = this.localeService.getAvailableLanguages();
}
static forRoot(options: TranslocoCommonConfigOptions): ModuleWithProviders<TranslocoCommonConfig> {
return {
ngModule: TranslocoCommonConfig,
providers: [
{
provide: TranslocoCommonConfigOptions,
useValue: options,
},
],
};
}
}

据我理解，这应该是正确的。然而，我很难在SPA项目中正确使用它。如果我修改TranslocoRootModule类以提供TRANSLOCO_CONFIG，如下所示：

{ provide: TRANSLOCO_CONFIG, useClass: TranslocoCommonConfig.forRoot({ productionMode: true }) }

我得到以下错误：

TS2322: Type '{ provide: InjectionToken<TranslocoConfig>; useClass: ModuleWithProviders<TranslocoCommonConfig>; }' is not assignable to type 'Provider'.   Types of property 'useClass' are incompatible.     Type 'ModuleWithProviders<TranslocoCommonConfig>' is missing the following properties from type 'Type<any>': apply, call, bind, prototype, and 5 more.

我应该如何用最好是最小的样板代码来实现这一点(我有五个SPA项目，希望尽可能少的重复代码(？

Answer 1

我能够通过为Transloco配置创建两个库模块来解决这个问题。

TranslocoCommonConfigModule负责实际配置：

export class TranslocoCommonConfigOptions {
productionMode: boolean;
loader: Type<TranslocoLoader>;
}
/**
* Global configuration for the Transloco library. Accepts a `TranslocoCommonConfigOptions`
* configuration object to dynamically set `TranslocoConfig.prodMode`.
*/
@NgModule()
export class TranslocoCommonConfigModule implements TranslocoConfig {
// Static and global configuration:
defaultLang = 'en';
reRenderOnLangChange = true;
// Dynamic configuration:
availableLangs: string[] = [];
prodMode = true;
constructor(private localeService: LocaleService, config: TranslocoCommonConfigOptions) {
this.availableLangs = this.localeService.getAvailableLanguages();
this.prodMode = config.productionMode;
}
}

而TranslocoCommonModule负责通过forRoot方法注入所需的服务和配置对象：

/**
* Common module for importing Transloco configuration in frontends with minimal boilerplate.
*
* Uses the `forRoot()` paradigm to inject `environment.production` dynamically from a frontend along with
* a frontend-specific translation loader. The rest of `TranslocoConfig` options are global and provided by
* `TranslocoCommonConfigModule`.
*/
@NgModule()
export class TranslocoCommonModule {
static forRoot(options: TranslocoCommonConfigOptions): ModuleWithProviders<TranslocoCommonModule> {
return {
ngModule: TranslocoCommonModule,
providers: [
{
provide: TRANSLOCO_CONFIG,
useFactory: (localeService: LocaleService) =>
new TranslocoCommonConfigModule(localeService, options),
deps: [LocaleService],
},
{
provide: TRANSLOCO_LOADER,
useClass: options.loader,
},
],
};
}
}

在实现了前端特定的翻译文件加载程序后，可以在如下模块中导入配置：

@NgModule({
imports: [
TranslocoCommonModule.forRoot({
productionMode: environment.production,
loader: TranslocoHttpLoader,
}),
],
})