如何檢查翻譯文件是否已在 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]
      ]};
  }

這很好用，但是當我第一次切換語言時，我在控制台中收到很多錯誤，警告我翻譯尚未准備好：

ngneat-transloco.mjs:284 缺少“tiempo.diamin.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());
  }

注意：我在組件邏輯中完成了所有這些，但我認為作為服務會更好，我將進入它。