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

Question

我有一个角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]
      ]};
  }

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

ngneat transloco.mjs:284个“tiempo.diamin.sabado”的缺少翻译

在我看来，这是由于订阅启动的'langChanged‘，而它还没有时间来加载翻译。

现在，我尝试过的其他方法都有问题：

• 如果我删除了langChanged的订阅，那么它只更新第一语言更改的值(因为翻译只在第一次加载，所以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());
  }

注意:我所有这些都是在组件逻辑中完成的，但我认为作为一个服务会更好，我将进入它。