Угловая проблема getTranslation для ngx-translate

Question

Я использую ngx-translate для перевода моего Angular Web-приложения, и кажется, что ngx-translate имеет проблему с функцией getTranslation(language).Когда он вызывается, он меняет текущий язык? Временно?и тогда мой компонент не отображается на нужном языке.

export class InputRadioComponent extends FormComponentInput implements OnInit {
  constructor(protected formDynamicS) {
  }

  public ngOnInit() {
    this.translate.getTranslation("fr").subscribe(res => {
      this.choose["fr"] = res['form-component']['choose-answer'];
    });
    this.translate.getTranslation("en").subscribe(res => {
      this.choose["en"] = res['form-component']['choose-answer'];
    });
    this.translate.getTranslation("de").subscribe(res => {
      this.choose["de"] = res['form-component']['choose-answer'];
    });
  }
}

В этом случае, как this.translate.getTranslation("de") - последний вызов, мой компонент всегда отображается на немецком языке.Я нахожу обходной путь, но это не то, что я хочу сохранить в своем коде.Вот мой обходной путь:

let languages: string[] = ["fr", "en", "de"];

languages.splice(languages.indexOf(this.translate.currentLang));
languages.push(this.translate.currentLang);

languages.forEach((language) => {
  this.translate.getTranslation(language).subscribe(res => {
    this.choose[language] = res['form-component']['choose-answer'];
  });
});

Это позволяет мне сохранить currentLang, потому что это будет последний вызов getTranslation

Answer 1

Я могу порекомендовать вам использовать Transloco для этого случая, он не страдает от описанного поведения и даже проще в использовании для вашего случая.

В Transloco getTranslation будет выглядеть так:

const translation = this.translate.getTranslation("fr");
this.choose["fr"] = translation['form-component']['choose-answer'];

Answer 2

Почему вы не загружаете каждый файл перевода при запуске и не сохраняете ссылку в сервисе?Это не идеально, но если ваши файлы переводов относительно малы, и у вас не так много языков для работы, то это может быть хорошим компромиссом.

Как ни странно, я вызываю getTranslation из своего кодаи это не меняет язык, в то время как translate.use, очевидно, делает.

Answer 3

Я столкнулся с той же проблемой только сейчас.Мне пришлось использовать cloneDeep (метод lodash), чтобы решить эту проблему.

const translateDeepCopy = cloneDeep(this.translate);

translateDeepCopy.getTranslation(lang).subscribe(res => {
  
});

Answer 4

Я согласен, что это довольно странное поведение.Но, ссылаясь на ваш обходной путь, вы можете найти более простое решение для сброса языка.

просто позвоните

this.translate.use('<LANGUAGE>');

например

this.translate.getTranslation("de").subscribe(res => {
  this.choose["de"] = res['form-component']['choose-answer'];
  this.translate.use('en');
});