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");
}

這對我有用。