如何检查transloco中是否已加载翻译文件

Question

我有一个Angular 14项目，我最近添加了transloco。它工作得很好，但它也使用了一些PrimeNG，每次切换语言时，我都必须提供正确的i18n翻译。

这就是我现在拥有的：

ngOnInit(): void {
this.translocoService.events$
.pipe(filter(e => e.type === 'langChanged'))
.subscribe(() => this.loadTranslations());
this.translocoService.events$
.pipe(filter(e => e.type === 'translationLoadSuccess'))
.subscribe(() => this.loadTranslations());
}
setEs(): void {
this.translocoService.setActiveLang("es");
}
setCa(): void {
this.translocoService.setActiveLang("ca");
}
private loadTranslations() : void {
console.log("CARGANDO TRADUCCIONES");
this.config.setTranslation({
monthNames : [
this.translocoService.translate("tiempo.mes.enero"),
this.translocoService.translate("tiempo.mes.febrero"),
this.translocoService.translate("tiempo.mes.marzo"),
... [lots of translations, 34 in total]
]};
}

这很好，但当我第一次切换语言时，控制台上出现了很多错误，警告我翻译还没有准备好：

ngnate transloco.mjs:284缺少"tiempo.damin.sabado"的翻译

在我看来，这是因为"langChanged"的订阅正在启动，而它还没有时间加载翻译。

现在，我尝试过的其他方法确实存在问题，如：

• 如果我删除langChanged的订阅，那么它只会在第一次语言更改时更新值(因为翻译只在第一次加载，所以不会再次触发translationLoadSuccess(。

• 如果我删除了translationLoadSuccess的订阅，第一次切换语言时它不会正确更新值，因为在处理langChanged事件时尚未加载翻译。

我应该如何处理它？

Answer 1

我通过预取翻译来解决这个问题。它对我有用，因为我现在只会几种语言(2种，最多4种(，而且这个应用程序没有那么大，但对其他人来说可能不实用。

我会让这个问题悬而未决；适当的"；答案已经给出，但我希望这能帮助其他人：

ngOnInit(): void {
let activeLanguage = this.translocoService.getActiveLang();
this.translocoService.load(activeLanguage).subscribe(() => this.loadTranslations());
for(var language of this.translocoService.getAvailableLangs()) {
if (typeof language === "string") {
if (activeLanguage !== (language as string)) {
this.translocoService.load(language as string).subscribe();
}
} else {
let lang = language as LangDefinition;
if (activeLanguage !== lang.id) {
this.translocoService.load(lang.id).subscribe();
}
}
}

this.translocoService.events$
.pipe(filter(e => e.type === 'langChanged'))
.subscribe(() => this.loadTranslations());
}

注意：我在组件逻辑中做了所有这些，但我认为它作为一项服务会更好，我会进入它。