时间戳

首页 > 解决方案 > 如何转换 Observable到其他 Observable

angular - 如何转换 Observable到其他 Observable

问题描述

我想使用 Transloco 并从现有的 REST API 而不是 i18n 文件中收集翻译。我用休息服务调用替换了 TranslocoHttpLoader 中的行：

  getTranslation(lang: string): Observable<Translation> {
    // return this.http.get<Translation>(`/assets/i18n/${lang}.json`);
    return this.translationService.fetchTranslations();
  }

TranslationTransloco 类型在哪里：

export declare type Translation = HashMap;

export declare type HashMap<T = any> = {
    [key: string]: T;
};

翻译 REST API 正在返回：

{
  "languageKeys": [
    {
      "key": "hello",
      "value": "hello transloco"
    },
    ...
 ]
}

所以

export class TranslationRest {
  languageKeys: LanguageKeyRest[] = [];
}

export class LanguageKeyRest {
  constructor(public key: string, public value: string) {}
}

所以我需要“转换”Observable<TranslationRest>成Observable<Translation>被 Transloco 消耗：

翻译服务

public fetchTranslations(): Observable<Translation> {
  const response: Observable<TranslationRest> = this.httpClient.post<TranslationRest>(this.url, this.body, {'headers': this.headers});
  return this.convert1(response);
}

这种最简单的（用于测试目的）convert1方法按预期工作：

private convert1(response: Observable<TranslationRest>): Observable<Translation> {
  return of({hello: 'hello transloco'})
}

html:

{{'hello' | transloco}}

在浏览器中显示：hello transloco

但是如何实现真正的转换呢？我试图按照如何在 Angular 中管道/映射 Observable 但没有运气：

  private convert2(response: Observable<TranslationRest>): Observable<Translation> {
    return response.pipe(
      map((res: TranslationRest) => res.languageKeys.map(item =>{
        item.key: item.value
      }))
    )
  }

标签： angulartypescriptrxjstransloco

解决方案

你转换不正确

private convert2(response: Observable<TranslationRest>): Observable<Translation> {
    return response.pipe(
      map((res: TranslationRest) => res.languageKeys.reduce((obj, item) => ({
        ...obj,
        [item.key]: item.value,
      }), {}))
    )
}

推荐阅读