Angular：Ngx-Translate 翻译服务不会动态更改语言

Question

我正在使用 ngx-translate 在我的 Angular 应用程序中支持国际化。我的应用程序支持 2 种语言 - en 和 zh。如果用户使用 zh 语言，我想提供动态切换到默认语言 (en) 的选项。我插入此选项的菜单是通过primeng/api MenuItem 创建的。我使用 MenuItem 的命令属性来触发事件以更改语言，如下面的代码所示。

options: MenuItem[];
this.options = [
  {
    label: "Set default language",
    command: event => this.langChange()
  }]

langChange() {
  this.translate.use("en");
}

使用它可以立即翻译我的文本，该文本使用从 zh 到 en 的翻译指令，但是通过翻译服务订阅的文本不会立即从 zh 翻译到 en。我尝试使用 translate.stream 而不是 translate.get 但没有任何变化。

Answer 1

这是ngx-translate for Angular9+ 中的一个已知问题。我相信这是因为在延迟加载的模块中缺少 i18n json 文件路径。作为一种解决方法，我在应用程序组件constructor() 中重新加载了我所有支持的语言：

app.component.ts

constructor(
  private translate: TranslateService
) {
  const lng = this.translate.getBrowserLang();
  this.translate.setDefaultLang(lng);
  this.translate.use(lng);
  const supportedLangs = ["en", "zh", "fr", "tr", "ar"];
  supportedLangs.forEach((language) => {
    this.translate.reloadLang(language);
  });
}

之后，您可以像以前那样在任何组件中动态使用或更改应用语言：

langChange() {
  this.translate.use("en");
}

这对我有用。