更新 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

这可能并不理想，但它有效并且似乎是一个不错的解决方法 - 至少对我而言。