将公共Transloco配置与特定于项目的变量组合起来

Question

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

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

transloco-library 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,
        }),
    ],
})