网站搜索

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 标志没有帮助。