在前端开发中，国际化是一个非常重要的话题。在多语言应用中，我们需要对不同语言的文本进行翻译和显示，这就需要我们使用国际化工具。在 Angular 应用中，angular-gettext-plugin 就是一款非常方便和易用的国际化工具。
前置条件
在开始使用 angular-gettext-plugin 之前，您需要确保以下环境已经安装并配置好：
- Node.js 和 npm
- Angular CLI
如果您没有安装以上依赖，可以参考官方文档进行安装和配置。
安装
使用 npm 可以很方便地安装 angular-gettext-plugin：
npm install angular-gettext-plugin --save-dev
配置
在 Angular 的工程中，我们需要修改 angular.json 文件来配置 angular-gettext-plugin：
-- -------------------- ---- -------
-
---
----------- -
-------- -
---
------------ -
-------- -
---
---------- -
---
------- -
--------------- -
------- -----
----------- ---
--
---------- -
-------- -
-------------- ------------------------------------
----------- ---
--
----- -
-------------- ---------------------------------
----------- ---
-
-
-
--
----------------- -
------------- -
---
------------------------- ----------
-------------- --------------------------
---------------- ------
--------- -
---
-
------- ------------
-------- -------------
--------- ---------------
-
--
---
--------- -
------- -------------------------
---------- -
-------------------------- -------------
------------------- ------------------------------
-
-
-
-
-
-
-
--
---
-在 i18n 属性下，我们配置了不同的本地化语言，其中源语言为英文："code": "en"。我们还在 configurations 属性下配置了插件的属性，包括插件名称和插件的配置属性，其中 compileTranslationsPath 和 translationsFile 分别指定了编译翻译和存放翻译的目录路径和文件名。
使用
提取文本
我们使用 angular-gettext-plugin 的第一步是提取文本。
ng xi18n --output-path src/locale --i18n-format=xlf --i18n-file=messages.xlf
以上命令将会将您的应用中所有的文案提取出来并存储在 src/locale/messages.xlf 文件中。
翻译文本
现在，我们可以在 src/locale/messages.xlf 文件中翻译我们的文本。
-- -------------------- ---- -------
----- ------------- ------------------
------ ------------- ----------------------------------------------
----- ------------------- -------------------- ----------------------- ---------------------
------
----------- --------------------------------------------- ----------------
------------- --------------
----------------------
-------------
---
-------
-------
--------在这里，我们以将 hello world 翻译为中文 你好，世界 为例。您可以根据需要添加更多的文本并进行翻译。
编译翻译
现在，您需要使用以下命令编译翻译，以便在应用中使用已翻译的文本。
ng build --configuration=production
使用翻译
在应用程序的模板中，您可以使用以下命令使用翻译文本。
<p>{{ 'hello world' | translate }}</p>在这里，我们使用 translate 管道将 hello world 翻译成中文 你好，世界。
结语
angular-gettext-plugin 是一款方便易用的国际化工具，它允许我们快速进行构建和管理多语言应用。希望这篇文章能够为您带来指导和帮助，如果您在使用中遇到了问题，可以查看官方文档或在社区中寻求帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560e981e8991b448df25e