4

我正在创建一个自定义 Angular ngx-translate 加载器，它可以从缓存或 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()即使尚未完成，也只能使用一次。observer.next()那么，在案例1 中已经发生的情况下，如何更新案例 2 中的翻译？

4

1 回答 1

5

这个答案可能与您不再相关，因为已经几个月了，但我会把它留在这里，以防将来有人偶然发现这个问题，就像我在寻找解决方案时所做的那样这个问题：

因此，似乎将两个不同的值推入getTranslation函数中的 observable 会造成混乱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)andtranslate.use(language)来更新翻译时使用的值。
通过在我们的 api 调用完成后立即调用它，我们最初会看到首先设置的翻译，getTranslation其中ngx-translation自动调用和 api 翻译，当我们.subscribe在我们的app.component.ts.

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

于 2020-03-02T06:08:20.207 回答