Question

我创建了自己的私有角库，其中包含多个组件，使我的生活更轻松。我遵循此tutorial创建了这个库。一切都很好，我什至将它添加到另一个项目中进行测试。

现在是我必须支持多种语言的部分，因为我住在比利时。过去，我一直使用ngx-translate包，没有任何问题，因此我认为这很容易。

我在项目中添加了带有翻译json的asset / i18n文件夹。

我发现angular cli不包括构建中的资产，因此在制作软件包之前，必须手动或用gulp将它们添加到dist文件夹中。完成此操作后，我注意到除非将转换内容包括到Main应用程序的json文件中，否则不会翻译标签。

我的库中的每个组件都有其自己的模块，所以我认为我只需要在这些模块中添加翻译模块即可。所以我做了以下。

export function httpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        DirectivesModule,
        ButtonModule,
        IconModule,
        PillModule,
        TranslateModule.forChild({
            loader: {
                provide: TranslateLoader,
                useFactory: (httpLoaderFactory),
                deps: [HttpClient]
            },
            isolate: true
        })
    ],
    declarations: [
        FilterComponent
    ],
    exports: [
        FilterComponent
    ]
})

这使情况变得更糟，不仅标签仍然没有被翻译，我的主要应用程序甚至没有使用自己的翻译。在库模块中进行这些更改之前，主应用程序的翻译没有问题。

是的，你猜对了，我被卡住了... 我似乎找不到正确的解决方案。

Answer 1

因为我无处可去，所以尝试了本post中所述的另一种方法。所以我将我的json文件转换为ts文件，并返回了json对象。然后，我创建了自己的translateService，将翻译添加到现有翻译（由主应用程序的json文件添加的翻译）之上，如后所述。

此方法有效，但否决了先前的翻译，甚至加载得太晚。这导致应用程序仅显示翻译关键字而不是翻译。因此，我没有像帖子中那样初始化翻译，而是使用了订阅首先等待主要翻译。

//Library
import { Injectable } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { en } from "../localization/en";
import { nl } from "../localization/nl";

@Injectable()
export class TranslateUiService {
    private availableLanguages = { en, nl };

    constructor(private translateService: TranslateService) {
    }

    public init(language: string = null): any {
        if (language) {
            //initialize one specific language
            this.translateService.setTranslation(language, this.availableLanguages[language], true);
        } else {
            //initialize all
            Object.keys(this.availableLanguages).forEach((language) => {
                this.translateService.setTranslation(language, this.availableLanguages[language], true);
            });
        }
    }
}

//App
constructor(private translateUiService: TranslateUiService, private translateService: TranslateService) {
        this.translateService.setDefaultLang('en');
        this.translateService.use('en').subscribe(() => {
            this.translateUiService.init('en');
        });
    }

Answer 2

您可以做这样的事情。

<div (click)="switchLanguage('en')"></div>

switchLanguage(language: string) {
        this.selectedLanguage = language
    }

在另一个组件中，只需用HTML编写这样的内容。

<button><i class="fa fa-history"></i>{{'general.#time'|translate}}</button>

这是en.json

"general": {
        "#time": "Time"
}

Answer 3

我怀疑您的构建步骤正在用库文件覆盖主应用程序的en.json等。因此缺少主应用程序的翻译。

除了隔离选项（可能需要更多请求服务器以加载翻译）之外，您可以考虑的一件事是更改构建步骤，以将库中的文件与主应用程序的翻译文件合并。

我建议以某种方式对库翻译键进行命名，以免发生任何可能的冲突。

然后在库中，您可以只使用TranslateModule.forChild()

或者，如果要保持隔离，请尝试将库的翻译文件放在i18n的子目录中，并适当地更改httpLoaderFactory

Answer 4

我这样做的方式与Beejee相似，但是我扩展了翻译服务。在TranslateService的扩展中，我将库的翻译添加到全局应用翻译的子级别（ui。[language]）下，因为我们使用与根应用相同的实例，并且我们不想覆盖根应用的翻译。然后，我在组件级别提供了扩展而不是常规的TranslateService，因此即使在该组件内的translate指令中也使用了扩展，并且将其隔离，这意味着我们不会通过覆盖currentLang和defautlLang的吸气剂来破坏根应用的翻译。 / p>

ui-translate.service.ts：


const availableLanguages: any = {
  'de' : { ... YOUR DE TRANSLATIONS ... },
  'en' : { ... YOUR EN TRANSLATIONS ... }
  ...
};
const langPrefix = 'ui';

@Injectable({
  providedIn: 'root'
})
export class UiTranslateService extends TranslateService implements TranslateService {


  constructor(public store: TranslateStore,
              public currentLoader: TranslateLoader,
              public compiler: TranslateCompiler,
              public parser: TranslateParser,
              public missingTranslationHandler: MissingTranslationHandler,
              @Inject(USE_DEFAULT_LANG) useDefaultLang: boolean = true,
              @Inject(USE_STORE) isolate: boolean = false) {
    super(store, currentLoader, compiler, parser, missingTranslationHandler, useDefaultLang, isolate);

    this.onTranslationChange.subscribe((_res: TranslationChangeEvent) => {
      // ensure after translation change we (re-)add our translations
      if (_res.lang.indexOf(langPrefix) !== 0) {
        this.applyUiTranslations();
      }
    });

    this.applyUiTranslations();
  }

  private applyUiTranslations() {
    for (var lang in availableLanguages) {
      if (availableLanguages.hasOwnProperty(lang)) {
        this.setTranslation(langPrefix + '.' + lang, availableLanguages[lang], true);
      }
    }
  }

  /**
   * The default lang to fallback when translations are missing on the current lang
   */
  get defaultLang(): string {
    return langPrefix + '.' + this.store.defaultLang;
  }

  /**
   * The lang currently used
   */
  get currentLang(): string {
    return this.store.currentLang === undefined ? undefined : langPrefix + '.' + this.store.currentLang;
  }

  public getParsedResult(translations: any, key: any, interpolateParams?: Object): any {
    // apply our translations here
    var lang = (this.currentLang || this.defaultLang).split('.')[1];
    translations = lang == 'de' ? de : en;
    return super.getParsedResult(translations, key, interpolateParams);
  }
  public get(key: string | Array<string>, interpolateParams?: Object): Observable<string | any> {
    return super.get(key, interpolateParams);
  }
}

my.component.ts：

    @Component({
        selector: 'xxx',
        template: 'xxx',
        providers: [
            { provide: TranslateService, useClass: UiTranslateService }
        ]
    })
    export class MyComponent implements OnInit { }

my.module.ts：

    @NgModule({
        imports: [
            CommonModule,
            TranslateModule
        ]
     })
     export class ComponentsModule {}

具有ngx-translate

4 个答案: