Angular i18n 动态文本答案

【问题标题】：Angular i18n Dynamic textAngular i18n 动态文本
【发布时间】：2020-08-25 09:20:22
【问题描述】：

我正在尝试确定是否可以使用 i18n 和相关库（例如，我正在为其进行 POC 的 (ngx-translate)）更改动态内容的语言。

我能够翻译静态内容，但我不知道如何为动态内容做同样的事情，例如 ngfor 循环中的内容或来自服务器的数据。

有没有办法对来自后端/db的内容进行转换？

或任何其他建议/建议将不胜感激。

【问题讨论】：

标签： javascript angular internationalization ngx-translate angular-i18n

【解决方案1】：

任何与翻译文件中的关键字匹配的内容都可以。因此，如果您的后端为您提供了这样的密钥，您可以使用 translate：

<div *ngFor="let key of keys">
  <p translate>{{key}}</p>
</div>

或者类似的东西。如果这是你的意思？

【讨论】：

这是一个更好、更清晰的答案
同样的区别山姆，你有前缀，这可能有助于 OP。 :-)

【解决方案2】：

这相当简单，只要您知道您的后端可能提供的价值：

// backend data returns known possible values:
const values = ['red', 'blue', 'green']

// de.json
color: {
  "red": "Rot",
  "blue": "Blau",
  "green": "Grün"
}

// app.component.html

<div *ngFor="let value of values">
{{ ('color.' + value) | translate }}
</div>

【讨论】：

这很好，因为有'color.'-前缀。结合起来我们可以做 color.{{value}}>
如果我知道已经知道该值，那很容易.. 但是如果我不知道后端返回什么怎么办？就像谷歌翻译一样，它会自动将所有内容翻译成最接近的翻译
不幸的是，这不是 ngx-translate 的工作方式，您必须提前将 key:value 对作为 json 文件提供。作为满足您需求的解决方案，您可能会编写一个服务，将您的后端值传递给另一个翻译服务（例如deepl.com/en/docs-api），该服务将返回翻译后的值。