Angular ngx-translate getTranslation 问题答案

【问题标题】：Angular ngx-translate getTranslation issueAngular ngx-translate getTranslation 问题
【发布时间】：2018-06-05 17:51:49
【问题描述】：

我正在使用 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 的最后一次调用

【问题讨论】：

标签： angular ngx-translate

【解决方案1】：

我刚才遇到了同样的问题。我不得不使用 cloneDeep（lodash 方法）来解决这个问题。

const translateDeepCopy = cloneDeep(this.translate);

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

【讨论】：

【解决方案2】：

我同意，这是一种相当奇怪的行为。但是参考您的解决方法，您可以有一个更简单的解决方案来重置语言。

打电话

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

例如

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

【讨论】：

你来这里是个好主意，我应该在我的帖子中警告人们，但我已经尝试过了，但没有成功。而且我认为这也不是一个干净的代码，我会看看是否有另一种方法来获得特定的翻译或另一种解决方案。但是谢谢你的帮助好友

【解决方案3】：

为什么不在启动时加载每个翻译文件并在服务中保留参考？这并不理想，但如果您的翻译文件相对较小并且您没有那么多语言需要处理，那么这可能是一个很好的折衷方案。

奇怪的是，我确实从我的代码中调用了 getTranslation，它并没有改变语言，而 translate.use 显然可以。

【讨论】：

我仍然可以读取 .json 文件，但我的想法是找到一个干净的方法来执行此操作。我目前不再从事这个项目了，但也许它已经在更新中修复了？总有一天我得检查一下

【解决方案4】：

我可以建议您在这种情况下使用 Transloco，它不会受到上述行为的影响，并且更容易用于您的情况。

在 Transloco 中 getTranslation 会是这样的：

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

【讨论】：