ngx translate angular 7 如何翻译动态数据来自不同的 API答案

【问题标题】：ngx translate angular 7 how to translate dynamic data comes from differents API'sngx translate angular 7 如何翻译动态数据来自不同的 API
【发布时间】：2019-02-06 09:05:27
【问题描述】：

我遇到了 ngx-translate 的问题！那就是我有 2 个不同语言的独立 API，例如类似于 http://example.com/api 和 http://example.com/fr/api/

现在在 ngx-translate 中，我必须使用 en/fr.json 文件来翻译我的 Angular 应用程序！正如我从文档中看到的！

但现在我需要使用来自这两个 API 的数据！已经在服务器上翻译好了！

http://example.com/api

http://example.com/fr/api/

所以我的问题在这里我是怎么做到的？！以及继续使用json files，因为我的应用中有一些静态词，例如the application menu

如果还有其他选择，请不要犹豫！

【问题讨论】：

那么，API 与翻译对象（通常在翻译文件中的 JSON 结构）没有关系？如果我理解正确，您需要根据所选语言从本地化 API 获取数据，对吧？
@Jota.Toledo 是的，这正是我所需要的！

标签： angular ionic-framework ngx-translate

【解决方案1】：

假设：

只有 2 个可能的语言选项：["en","fr"]
翻译文件不是从本地化 API 中获取的。相反，它们位于您项目的 assets 文件夹中。
通过 ngx-translate 更改语言时，无需重新获取数据

您可以创建一个构造正确 API 端点的服务，如下所示：

@Injectable()
export class EnpointLocalizer {
  private readonly tokenMap = {'en': '/', '/fr/'}
  constructor(private readonly translate: TranslateService){}

  localizeJoin(sections: string[]){
   const {currentLang} = this.translate;
   return sections.join(this.tokenMap[currentLang] || '/'); 
  }
}

然后你可以在需要的地方注入它并按如下方式使用它：

@Injectable()
export class FooService {
 private endpoint = ["http://example.com","api"];

 constructor(private http: HttpClient, private localizer: EnpointLocalizer){}

 fetch(){
   return this.http.get(this.localizer.localizeJoin(this.endpoint),...);
 }
}

当然，您可以通过不同的方式实现“本地化”逻辑（例如，正则表达式模式 + 替换）。但对于您的用例，我认为这是一个简单明了的开始。

【讨论】：

【解决方案2】：

只对那些词使用翻译管道(some statics words in my app like the application menu)

喜欢

{{ 'HOME.NAME' |翻译}}

并从 api 数据中删除翻译过滤器

【讨论】：