angular - ngx-translate - 无法在库模块中隔离翻译
我正在尝试构建一个 Angular 库,该库将拥有与使用模块不同的翻译集合。它由多个模块组成,这些模块随后通过 SharedModule 导出给使用者。
翻译保持在独立模块中:
import { HttpClient } from '@angular/common/http';
import { InjectionToken, ModuleWithProviders, NgModule } from '@angular/core';
import { TranslatePoHttpLoader } from '@biesbjerg/ngx-translate-po-http-loader';
import {
MissingTranslationHandler,
TranslateLoader,
TranslateModule as NgxTranslateModule,
} from '@ngx-translate/core';
import { TranslationConfig } from '../models/module-config.model';
export function HttpLoaderFactory(http: HttpClient, config: TranslationConfig) {
const prefix = config && config.urlPrefix || '/i18n/apps/maps';
const suffix = config && config.urlSuffix || '.po';
console.log('Will build new loader');
return new TranslatePoHttpLoader(http, prefix, suffix);
}
export class CustomMissingTranslationHandler implements MissingTranslationHandler {
handle(params: MissingTranslationHandlerParams) {
return params.translateService.parser.interpolate(params.key, params.interpolateParams);
}
}
export const TRANSLATIONS_CONFIG = new InjectionToken('TRANSLATIONS_CONFIG');
@NgModule({
declarations: [],
imports: [
NgxTranslateModule,
],
exports: [
NgxTranslateModule,
]
})
export class TranslateModule {
public static forRoot(config: TranslationConfig): ModuleWithProviders {
return {
ngModule: TranslateModule,
providers: [
{
provide: TRANSLATIONS_CONFIG,
useValue: config
},
...NgxTranslateModule.forChild({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient, TRANSLATIONS_CONFIG]
},
missingTranslationHandler: {
provide: MissingTranslationHandler,
useClass: CustomMissingTranslationHandler,
deps: [TRANSLATIONS_CONFIG],
},
isolate: true,
}).providers
],
};
}
}
翻译模块通过 SharedModule 暴露:
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { InjectionToken, ModuleWithProviders, NgModule } from '@angular/core';
import { ModuleConfigModel } from './models/module-config.model';
import { TranslateModule } from './modules/translate.module';
@NgModule({
declarations: [
/* ... */
],
imports: [
TranslateModule,
],
exports: [
/* ... */
NgxTranslateModule,
TranslateModule,
]
})
export class SharedModule {
static forRoot(moduleConfig: ModuleConfigModel): ModuleWithProviders {
return {
ngModule: SharedModule,
providers: [
{
provide: ModuleConfigModel,
useValue: moduleConfig
},
...TranslateModule.forRoot(moduleConfig.translationConfig).providers, ] }; } }
并且 SharedModule 通过 public_api.ts 向使用者公开。我是这样使用它的:
imports: [
SharedModule.forRoot({
apiKey: environment.apiKey,
baseURL: environment.urlPrefix,
translationConfig,
}),
TranslateModule.forRoot({
isolate: true,
}),
],
我尝试了在我的模块的 forChild 方法中对 isolate 的所有组合,但主 forRoot() 总是覆盖了来自原始库 TranslateModule 的模块初始化。唯一似乎有效的方式是在库文件中切换到 NgxTranslateModule.forRoot(),并从库使用者中移除主 NgxTranslateModule.forRoot(),这是完全不可接受的…
TL;DR:当翻译没有被隔离时,它们按预期工作。当我将它们隔离到懒加载的 forChild 时,它们会被主 forRoot() 模块初始化覆盖。isolate 标志没有帮助。