Angular:Ngx翻译服务不动态更改语言

Question

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

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

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

Answer 1

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

应用程序组件.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");
}

这对我有效。