Question

我正在创建一个自定义Angular ngx-translate Loader，它可以从缓存或API中获取翻译。我遇到的问题是案例2（请参见下面的代码）：

所需过程：

从缓存中获取翻译（同步）
（通过观察者）返回缓存的翻译
从api（异步）获取翻译
比较缓存和api（发现差异）
发送翻译的更新版本<-如何？

这就是我得到的：

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()尚未完成，也只能使用一次。那么，如何在案例1中已经发生observer.next()的情况2中更新翻译？

Answer 1

这个答案可能与您不再相关了，因为已经过去了几个月，但我还是把它留在这里，以防将来有人像我在寻找时一样迷失于这个问题上解决此问题的方法：

因此，似乎将两个不同的值推入getTranslation函数中的可观察值与ngx-translate混淆了-尽管我找到了解决方法。

我不确定这是否是最好的方法，但是它可以解决我的问题，所以我将继续使用它。

CustomTranslateLoader：

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在将新翻译推入可观察对象时只是忽略，因此我们可以简单地调用translate.setTranslation(language, response.data)和translate.use(language)来更新翻译时使用的值。
通过在api调用结束后立即调用此函数，我们最初会看到getTranslation中首先设置的翻译，ngx-translation会自动进行调用，而当我们{{1 }}移至.subscribe中的函数。

这可能不是理想的方法，但是它可以工作，并且似乎可以解决-至少对我来说。

更新ngx-translate的加载器中的翻译

1 个答案: