当我第一次更改应用程序的语言时,翻译服务会请求代表新语言的文件,我的“智能”组件字符串会正确反射(reflect)更新,但任何“纯/哑”组件都不会,它们会保留在以前的语言中。然而,一旦新的语言文件被加载到缓存中并且我继续更改语言,一切似乎都工作正常。
似乎任何纯组件都不会解析来自新语言文件的 ajax 响应的更新,它只会在文件已加载到缓存中时正确更改语言。同样,这仅适用于使用 ChangeDetectionStrategy.OnPush 的组件
我了解在dumb组件中使用输入和 Observable 的 changeDetection,但在这种情况下,我对管道不太熟悉。可能我遗漏了什么?
更新
我已经设法破解了一个修复程序,它不是很好,但它可以工作。这是我的服务中包装翻译服务的构造函数。
我检查是否已在缓存中为我将要选择的语言准备了语言 json 文件。如果我没有它,我会使用 ng2-translate 中的“reloadLang”方法去获取它。获得它后,我使用空超时,然后调用“translate.use”。某处存在时间问题,因为如果我取消超时,它就不起作用。 如果我已经有了要切换到的翻译文件,我只需正常使用 translate.use 即可,一切正常。
constructor(private translate: TranslateService, public store: Store<any>) {
// this language will be used as a fallback when a translation isn't found in the current language
translate.setDefaultLang('en');
// subscribe to changes
store.select('i18n').subscribe((state: MultilingualStateI) => {
// update ng2-translate which will cause translations to occur wherever the TranslatePipe is used in the view
if (this.translate.getLangs() && (this.translate.getLangs().indexOf(state.lang) > -1)) {
this.translate.use(state.lang)
} else {
this.translate.reloadLang(state.lang).take(1).subscribe(() => {
setTimeout(() => this.translate.use(state.lang), 0);
});
}
});
我不完全确定这里发生了什么,但它似乎是使用 ChangeDetectionStrategy.OnPush 和请求翻译文件的新响应之间的混合。如果其他人看到此内容,请添加您的意见。
最佳答案
我被这个问题困住了。我有一些图表(我正在使用 ng2-charts
)并且当我更改语言时(例如,从 en
到 es
),所有除了与图表相关的标签外,标签已更新。为了用新语言更新图表,我不得不再次将语言更改为 es
(因此,第一次双击更改语言)。
在阅读了您的问题和解决方法后,我进行了检查,正如您所指出的,问题出在缓存上。第一次更改语言时,会加载 JSON,但由于它不在缓存中,因此并非所有组件都得到翻译(在我的例子中,图表未正确更新)。第二次更改为相同的语言时,标签已在缓存中,因此它可以正常工作。
我通过在初始化服务时加载所有可用语言来修复它:
constructor(private translate: TranslateService) {
var navigatorLanguage = (window.navigator.userLanguage || window.navigator.language).toLowerCase().split("-")[0];
// this language will be used as a fallback when a translation isn't found in the current language
translate.setDefaultLang(navigatorLanguage);
// the lang to use, if the lang isn't available, it will use the current loader to get them
translate.use(navigatorLanguage)
// Hack to load all languages
// If we don't do this, the first time we change language not all elements are properly translated
translate.reloadLang('en')
translate.reloadLang('es')
}
就我而言,我只有这两种语言。如果有更多,也许一些 for 循环将有助于重新加载每个 lang :)
关于angular - ng2-translate - 翻译字符串未在具有 OnPush 更改检测的组件中更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38272388/