更新 ngx-translate 加載器中的翻譯

Question

我正在創建一個自定義的 Angular ngx-translate Loader，它可以從緩存或 API 中獲取翻譯。 我被卡住的地方是案例 2（見下面的代碼）：

所需程序：

1. 從緩存中獲取翻譯（同步）
2. 返回緩存的翻譯（通過觀察者）
3. 從 api 獲取翻譯（異步）
4. 比較緩存和 api（發現差異）
5. 發送翻譯的更新版本<--如何？

這是我得到的：

getTranslation(lang: string): Observable<any> {
    return new Observable(observer => {

      // get translations from cache + start getting translations from API
      const cachedTranslations = this.cacheService.getTranslation(lang);
      const apiTranslations = this.http.get(environment.translationApi + lang);


      if (cachedTranslations) {
        // CASE #1: return cached translations
        observer.next(cachedTranslations);
      }

      apiTranslations.subscribe(translations => {
        // CASE #2: if cached translations are not up to date
        // or dont exist, add new translations and reload lang
        if (JSON.stringify(translations) !== JSON.stringify(cachedTranslations)) {
          this.cacheService.setTranslations(lang, translations);
          observer.next(translations);
        }

        observer.complete();
      }, () => {
        observer.complete();
      });

    });
}

使用observer.next()只能工作一次，即使它還沒有完成。 那么如何更新案例 2 中的翻譯，其中observer.next() .next observer.next()已經發生在案例 1 中？

Answer 1

這個答案可能不再與您相關，因為已經幾個月了，但我會把它留在這里，以防將來有人偶然發現這個問題，就像我在尋找解決方案時所做的那樣這個問題：

因此，似乎將兩個不同的值推入getTranslation函數中的可觀察對象與ngx-translate混亂 - 不過我找到了解決方法。

我不確定這是否是最好的方法，但它有效並解決了我的問題，所以我會繼續使用它。

自定義翻譯加載器：

getTranslation(lang: string): Observable<any> {
    const translations = new BehaviorSubject(undefined);          
    translations.next(JSON.parse(this.localStorageService.getItem('translations')));
    return translations;
}

loadTranslation(lang) {
    return this.blockpitApiService.get('/translations/' + lang);
}

app.component.ts

constructor(
    private translate: TranslateService,
    private translateService: CustomTranslateLoader,
    private localStorageService: LocalStorageService
) {

    language = translate.getBrowserLang();
    translate.setDefaultLang(language);

    // load translations from server and update translations
    this.translateService.loadTranslation(language).subscribe(response => {
        this.localStorageService.setItem('translations', JSON.stringify(response.data));
        translate.setTranslation(language, response.data);
        translate.use(language);
    });
 }

由於ngx-translate在我們將新翻譯推送到 observable 時簡單地忽略，我們可以簡單地調用translate.setTranslation(language, response.data)和translate.use(language)來更新翻譯時使用的值。
通過在我們的 api 調用完成后立即調用它，我們最初會看到首先在getTranslation中ngx-translation ， ngx-translation自動調用該翻譯，以及當我們.subscribe app.component.ts的函數時，api 翻譯一旦可用app.component.ts

這可能並不理想，但它有效並且似乎是一個不錯的解決方法 - 至少對我而言。