35

我正在使用 Angular 6 进行一个大型项目。这个项目需要大量的 i18n 集成。我正在努力就如何进行做出正确的决定。

我看到它的方式是我可以选择：

  1. ngx-translate ( https://github.com/ngx-translate/core )
  2. 角 i18n ( https://angular.io/guide/i18n )

我倾向于选择选项 2；Angular 的 i18n。这是因为它是 Angular 自己的内置包，对我来说更合适。显然，它对 SEO 也更好，并且在没有任何工作的情况下对性能稍微好一点。另外，现在它发布了，我认为 ngx-translate 可能已被弃用。这里有很多信息：Angular 5 国际化。

但是，这是我的保留意见：

  • 显然 Angular 的版本是相当新的/仍在追赶（https://github.com/ngx-translate/core/issues/495）。是不是太新了？
  • 显然我必须为每种语言建立一个单独的网站（https://angular.io/guide/i18n#template-translations）？？？我真的不认为这会是一件好事。是对的吗？还是每次都动态插入模板文件？我知道使用 ngx-translate 翻译的单词只是存储在 .json 文件中 - 我喜欢它的简洁性。我不认为我们想要一堆不同的网站构建。

有没有办法使用 Angular i18n 进行实时语言切换？即在页面上切换语言而不从服务器重新加载/重新获取数据？这就是他们所说的JIT吗？

有没有人尝试过https://github.com/robisim74/angular-l10n？看起来也很好。

4

4 回答 4

22

是不是太新了？

这是基于意见的，因此是题外话

显然我必须有一个单独的网站

您需要一个单独的应用程序（即 index.html + bundles）。但是您可以从一个 URL 为所有这些应用程序提供服务，从而决定在服务器上提供哪个应用程序。当基于 Ivy 构建的新动态 i18n 可用时，这将（希望）随着 Angular 7 改变。

是否每次都动态插入模板文件？

不明白你的意思。您构建的语言环境的翻译在编译时由 Angular AOT 编译器存储在生成的模板类中。

有没有办法使用 Angular i18n 进行实时语言切换？

不，下一个版本的 i18n 也无法做到这一点。同一个独特的应用程序将能够以多种语言运行，但仍必须在启动时选择语言，并且您必须重新启动应用程序才能选择另一种语言。

有没有办法使用 Angular i18n 进行实时语言切换？

不，至少效率不高。

这就是他们所说的JIT吗？

不，JIT 编译器是在启动时在浏览器中将您的 HTML 模板编译成 JavaScript。在生产中，您使用 AOT 编译器（也用于将翻译集成到生成的 JS 类中），它对模板进行类似的编译，但在构建时而不是运行时。

于 2018-06-28T16:31:30.087 回答
9

讨论仍在进行中，您可以在这里找到一些答案和意见，甚至直接来自 Angular 开发人员： https ://github.com/ngx-translate/core/issues/495

就个人而言，我会使用官方 i18n 构建应用程序，并最终使用 ngx-translate 库在代码中添加一些专用翻译。

有没有办法使用 Angular i18n 进行实时语言切换？

实际上，有。您需要构建您的应用程序的不同 dist，但您可以在完全部署后切换实时：

官方 Angular 文档和建议教程

于 2018-10-09T13:04:21.127 回答
3

可以理解为什么开发人员喜欢像 ngx-translate 这样的库来处理国际化。毕竟，通过使翻译问题成为 1v1 映射，我们的生活变得如此轻松。不幸的是，这不是人类语言的工作方式。一个有两个知道不止一种语言的人可以更好地理解这种方法的缺点。

这是一个小例子：假设您有一个旅行费用应用程序，您有一个表格视图，其中一个列标题是“时间”，指示何时报告费用。然后想象在这样的应用程序中，您有一个迷你计算器，用于对您的费用进行基本验证，该计算器恰好有一个乘法按钮 x，中间显示“倍”。当您执行 ngx-translate 时，您使用相同的键“TIMES”提取它们，然后翻译人员会为您返回一个翻译。但是第一次出现的“时间”在所有其他语言中的翻译不一定与第二次相同。以西班牙语为例：

  • “二乘三”（如在计算器中）->“dos POR tres”
  • “expense TIMES”（如表格视图）->“TIEMPOS de gasto”

这实际上就是为什么国际化正在转向使用更复杂的格式（例如 XLF）来支持含义、描述（在 Angular 的情况下）而不是旧的 1-depth JSON 样式，它不能适应上下文的翻译。

现在您可能会争辩说，这可以通过为“时间”注册两个不同的键来解决，在英语中它们恰好映射到同一事物，但这要求您作为开发人员了解您的应用程序在开发时支持的所有语言，否则您将不得不经历另一个迭代（时间就是金钱！）获取客户的反馈，然后添加一个单独的密钥，而如果您为您的消息（文本）提供描述和含义，那么翻译人员会在您不了解其他人的情况下为您处理语言（如果您知道西班牙语，请考虑一下在英语中相同但不是西班牙语的动词的虚拟语气和指示性形式会有多复杂）。

要回答您的另一个问题“有没有办法使用 angular i18n 进行实时语言切换？”：是的。看看这篇关于应用程序状态管理的精彩文章。长话短说，您需要在 URL 中反映您的客户端和持久状态。然后您需要做的就是在您的路径中添加一个语言环境前缀，这会导致您的 Web 服务器为您提供正确的语言环境构建。然后，无论您的应用程序在更改语言环境更改操作之前的状态是什么，都可以从 URL 中恢复（因为它“反映了持久状态和客户端状态”）。

于 2019-01-21T16:11:30.950 回答
1

Angular I18N 的一大优势是它对模板的影响很小。您只需在要本地化的每个元素上添加 i18n 属性。所以

<p>Hello World<p>

变成

<p i18n>Hello World<p>

无需大量更改标记，无需手动维护资源文件。如果您为 Angular 或 React 使用任何其他 I18N 库，则需要大量修改标记，例如

<p>Translate("Hello World")<p>

并且您必须手动将字符串添加到中性资源文件中，例如

"Hello World": "Hello World"

然后，如果您想更改字符串，您还必须记住更新资源文件中的键和值。

使用 Angular I18N，您可以使用提取工具来创建和维护中性资源文件。

Angular I18N 目前缺少的是在源代码中本地化字符串的能力。不过这个功能很快就会出现。

于 2019-02-04T22:06:52.453 回答