更新ngx-translate的加载器中的翻译 [英] Update translations in loader of ngx-translate

问题描述

我正在创建一个自定义Angular ngx-translate加载程序，它可以从缓存或API中获取翻译.我遇到的问题是案例2(请参见下面的代码):

I am creating a custom Angular ngx-translate Loader which either gets translations from cache or from an API. The point where I am stuck is Case 2 (see code below):

所需过程:

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()只能运行一次，即使尚未完成也是如此.那么，如何在案例1中已经出现observer.next()的情况2中更新翻译?

Using observer.next() works only once, even if it isn't completed yet. So how do I update the translations in Case 2 where an observer.next() already happend in Case 1?

推荐答案

这个答案可能与您不再相关了，因为已经过去了几个月，但是如果有人发现这个问题，我会留在这里.在将来，就像我在寻找解决此问题的方法时一样:

This answer might not be relevant to you anymore, since it's been a few months, but I'll just leave it here, in case anybody stumbles over this question in the future, just like I did, when I was looking for a solution to this problem:

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

So it seems like pushing two different values into the observable in the getTranslation function messes with ngx-translate - I found a work around though.

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

I'm not sure if this is the best way to do it, but it works and solves my problem, so I'm just gonna go ahead and use it.

CustomTranslateLoader:

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

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会自动调用ngx-translation；当我们在.subscribe中使用api翻译时，它们会尽快可用.我们的app.component.ts.

Since ngx-translate simply ignores when we push new translations into the observable, we can simply call translate.setTranslation(language, response.data) and translate.use(language), to update the values used when translating.
By calling this as soon as our api call is finished, we initially see the translation that are first set in getTranslation which ngx-translation calls automatically and the api translations as soon as they are available when we .subscribe to the function in our app.component.ts.

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

This might not be ideal but it works and seems like an ok workaround - at least to me.

这篇关于更新ngx-translate的加载器中的翻译的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！