类别:i18n

昨天，我们讨论了如何更改Angular应用程序的语言环境。下一步是通过将所有文本翻译成不同的语言，使我们的应用程序完全国际化。

而Angular有它的本地化的实现要国际化应用程序，用于此类任务的最流行的库是ngx-translate。

为什么不使用Angular的内部实现呢?主要原因是Angular会为每个语言环境构建应用程序的一个版本。因此，如果你必须支持20个不同的语言环境，你的Angular构建将会输出20个不同的应用程序。这意味着更改站点将导致应用程序的完全重新加载。这也意味着更改翻译需要对应用程序进行完整的重新构建和重新部署。

ngx-translate更加灵活，因为它依赖管道、指令和服务在运行时而不是在构建时翻译文本。下面是一些例子:

与TranslateService：

与TranslatePipe：

与TranslateDirective：

翻译来自特定的文件，其中翻译键(“你好”在我的例子中)映射到每种语言中的实际值。ngx-translate支持开箱即用的不同格式(例如JSON和阿宝）.

这里有一个存储在en.json：

同样的法语翻译fr.json：

我们要做的就是指出翻译文件的位置和ngx-translate将根据需要根据地区下载它们。

定义默认情况下支持哪种语言以及使用哪种语言都可以使用TranslateService来自图书馆:

你可以看到一个活生生的例子ngx-translate在Stackblitz这里。如果你想试试，可以用我的ngx翻译一步一步的教程。

区域设置是国家和语言的组合，例如fr - ca加拿大说法语或en - us在美国使用的英语。当您希望创建一个在全球范围内工作的应用程序时，区域设置很重要。

举个例子，让我们用下面的句子来代表美国:

2023年4月1日，该商品的价格为2056.23美元

同样的句子用法语表示法国是:

Le 01/04/2023, Le prix de cet文章était 2 056,23欧元

如你所见，一切都不一样了。货币、数字格式、日期格式，当然还有语言。了解地区之间的所有这些差异将是一项复杂的任务。幸运的是，Angular知道大部分的locale管道和格式化功能使用该区域设置正确格式化日期/数字/货币。

为了支持不同的地区，我们必须将它们全部导入main.ts：

然后可以配置提供程序以设置默认值LOCALE_ID：

就像这样，这个表达式{{2056.23 | number}}将会显示 056,23岁而不是2056 .23（代码示例）.因此，我们的管道将从现在开始使用默认区域设置。