Angular 6-i18n与ngx-translate

时间:2018-06-28 15:57:11

标签: angular angular-i18n

我正在使用angular 6进行大型项目。该项目需要大量的i18n集成。我正在就如何进行做出正确的决定。

我看到的方式是我可以选择:

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

我倾向于选择选项2; Angular的i18n。这是因为它是Angular自己的内置软件包,对我来说更好。显然,对于SEO来说也更好,而在没有任何变通的情况下,它的性能也稍好一些。另外,现在发布了,我认为ngx-translate可能已被弃用。 这里有很多信息:Angular 5 internationalization

但是我的保留是

有没有办法用角度i18n进行实时语言切换?即在页面上切换语言而未从服务器重新加载/重新获取数据?那就是他们所说的准时制吗?

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

非常感谢。 最好的问候。

4 个答案:

答案 0 :(得分:17)

  

是不是太新了以至于无法接受?

这是基于观点的,因此没有主题

  

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

您需要一个单独的应用程序(即index.html +捆绑软件)。但是您可以通过单个URL为所有这些应用程序提供服务,从而决定在服务器上提供哪个应用程序。当希望在Angular 7上建立基于Ivy的新动态i18n时,情况将会改变。

  

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

不确定您的意思。 Angular AOT编译器在编译时将为您构建的语言环境的翻译存储在生成的模板类中。

  

有没有办法用角度i18n进行实时语言切换?

否,下一个i18n版本也不可能。相同的,独特的应用程序将能够以多种语言运行,但是在启动时仍必须选择该语言,并且您必须重新启动该应用程序才能选择另一种语言。

  

有没有办法用角度i18n进行实时语言切换?

不。至少没有效率。

  

这就是他们所说的准时制吗?

不。 JIT编译器是在启动时在浏览器中将HTML模板编译为JavaScript的工具。在生产中,您使用AOT编译器(也用于将翻译集成到生成的JS类中),该编译器对模板进行类似的编译,但是在构建时而不是在运行时。

答案 1 :(得分:4)

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

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

  

有没有办法用角度i18n进行实时语言切换?

真的,有。您需要构建不同的应用程序发行版,但可以在完全部署后立即切换:

Official Angluar docssuggested tutorial

答案 2 :(得分:1)

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

这是一个小例子: 假设您有一个旅行费用应用程序,则有一个表格视图,其中一个列标题为“时间”,指示何时报告费用。然后想象一下,在这样的应用程序中,您有一个用于对费用进行基本验证的微型计算器,而该计算器恰好有一个乘法按钮x,上面有一个“ times”的停留时间。当您执行ngx-translate时,您会使用相同的键“ TIMES”提取它们两者,而翻译人员又会为您提供一份翻译。但是,在所有其他语言中,第一次出现的“时间”不一定与第二次的翻译相同。以西班牙语为例:

  • “两个乘以三个”(如计算器中所示)->“ dos POR tres”
  • “费用时间”(如表格视图所示)->“ TIEMPOS de gasto”

这实际上就是为什么国际化趋向于使用更复杂的格式(例如XLF)来支持含义,描述(在Angular的情况下),而不是旧的1深度JSON样式(无法适应相关翻译)的方向到上下文。

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

要回答另一个问题“是否有办法使用angular i18n进行实时语言切换?”:是的。看看this awesome article有关应用程序中状态管理的信息。长话短说,您需要在URL中反映您的客户端和持久状态。然后,您要做的就是在路径中添加语言环境前缀,这将使您的Web服务器为您提供正确的语言环境构建。然后,在更改语言环境更改操作之前,您的应用程序状态可以从URL恢复(因为它“反映了持久状态和客户端状态”)。

答案 3 :(得分:1)

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

<p>Hello World<p>

成为

<p i18n>Hello World<p>

无需大量更改标记,也无需手动维护资源文件。如果您将其他任何I18N库用于Angular或React,则需要对标记进行大量修改,例如

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

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

"Hello World": "Hello World"

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

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

Angular I18N当前缺少的是能够在源代码中本地化字符串。但是,此功能很快就会出现。