Question

我正在尝试构建一个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）。提供者， ] }; } }

SharedModule通过public_api.ts暴露给消费者。我这样使用它：

imports: [
    SharedModule.forRoot({
      apiKey: environment.apiKey,
      baseURL: environment.urlPrefix,
      translationConfig,
    }),
    TranslateModule.forRoot({
      isolate: true,
    }),
  ],

我在模块的isolate方法中尝试了forChild的所有组合，并且总是主forRoot()覆盖原始库TranslateModule中的模块初始化。唯一可行的方法是切换到库文件中的NgxTranslateModule.forRoot()并从库使用者中删除主NgxTranslateModule.forRoot()，这是完全不可接受的...

TL; DR：当翻译不是孤立的时，翻译将按预期工作。当我将它们隔离到延迟加载的forChild中时，它们会被主forRoot()模块的初始化所覆盖。 isolate标志没有帮助。

ngx-translate-无法在库模块中隔离翻译

0 个答案: