前言
国际化（i18n）是现代 Web 应用必不可少的一个特性。Angular 框架提供了一个非常方便的 i18n 扩展，可以帮助我们快速实现应用的国际化。
@ngx-translate/core 是 Angular 国际化的最受欢迎的第三方库之一。它支持多种语言，异步加载翻译文件等功能。但是，当我们需要从服务器动态获取翻译文件时，它就有一些局限性了。
这时，@jgornick/ngx-translate-po-http-loader 就非常有用了。它是 @ngx-translate/core 的扩展，可以帮助我们从服务器请求 po 文件并使用它进行翻译。
在本文中，我们将学习如何使用 @jgornick/ngx-translate-po-http-loader，以及如何设置服务器端以提供 po 文件。
安装
首先，我们需要安装 ngx-translate 和 @jgornick/ngx-translate-po-http-loader。
npm install @ngx-translate/core @jgornick/ngx-translate-po-http-loader --save
使用方法
注入 TranslateModule
在应用的根模块（例如 app.module.ts）中，我们需要导入 TranslateModule：
-- -------------------- ---- -------
------ - ----------------- ---------- - ---- -----------------------
------ - ---------------- --------------- - ---- ----------------------
------ - --------------------- - ---- -----------------------------------------
-----------
-------- -
-----------------
-------------------------
------- -
-------- ----------------
----------- ------ ----------- -- --- --------------------------- --------------- -------
----- ------------
-
--
--
-------- -----------------
--
------ ----- --------- - -在这里，我们导入了 HttpClientModule 和 HttpClient，以便向服务器发送请求。然后，我们将 TranslatePoHttpLoader 实例传递给 TranslateModule 的 loader 选项中。
TranslatePoHttpLoader 构造函数的第二个参数是翻译文件的路径，可以根据实际路径进行修改。
管理语言
在 Angular 应用中，我们通常使用 ngx-translate 的 TranslateService 来管理当前语言，切换语言等。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- ----------------------
------------
--------- -----------
--------- -
------------- -----------------
------- -----------------------------------------------
------- ---------------------------
------- ----------------------
---------
------ ------- - --------- -------
-
--
------ ----- ------------ -
------------------- ---------- ----------------- -
-------------------------------
--------------------
-
------------------------ ------- -
-----------------------------
-
-在这里，我们创建了一个 AppComponent，包含一个下拉菜单来切换应用的语言。我们也注入了 TranslateService ，以便语言的切换。
最后，我们使用管道 translate 来获取翻译文本。在这里，我们使用了一个字符串常量 'HELLO'，可以在 po 文件中找到相应的键值对。
服务器端设置
在客户端配置完成后，我们需要确保在服务器上提供翻译文件。
这里，我们简单介绍如何使用 gettext 工具生成 po 文件。gettext 广泛用于国际化应用，可以通过一些工具和脚本来自动生成、修改和更新翻译文件。
首先，我们需要下载并安装 gettext 工具。在 Ubuntu 下，可以通过以下命令进行安装：
sudo apt-get install gettext
对于其他系统，请查看 gettext 文档以了解安装方法。
接下来，我们需要添加一些标记（例如 _ 和 gettext）来标识需要翻译的文本。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- ----------------------
------------
--------- -----------
--------- -
---------- -----------
-- ------------------------- -- - ------ ----------- --- ------------------
-
--
------ ----- ------------ -
------------------- ---------- ----------------- -
-------------------------------
--------------------
-
-在这里，我们使用 i18n 属性来标记需要翻译的文本。@@HELLO_WORLD 是该文本的键，我们需要在后面的翻译文件中为其提供对应的翻译。
接下来，我们需要运行 xgettext 命令来从应用中提取所有需要翻译的文本，并生成一个 .pot 文件。
xgettext --keyword=i18n --language=Python --output=en.po app.component.ts
在这里，我们指定了需要提取的关键字（即 i18n）以及要生成的 po 文件的语言代码（即 en）。
接下来，我们可以打开生成的 en.po 文件，并为其中的键添加翻译文本。最后，我们需要将 .po 文件放在服务器上，以供客户端动态加载。
结论
我们学习了如何在 Angular 应用中使用 @jgornick/ngx-translate-po-http-loader 动态请求 po 文件，并在客户端中使用它进行翻译。我们还学习了如何使用 gettext 工具生成 po 文件，并将其放置在服务器端。
现在，您可以为您的 Angular 应用添加国际化功能了。希望这篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fd981e8991b448dd684