介绍
@pluesenpai/ngx-translate-po-http-loader 是一个基于 Angular 的国际化插件，可以通过加载 PO 文件实现多语言翻译。同时，它可以通过 HTTP 请求动态加载 PO 文件，在修改 PO 文件后无需重启应用程序。
安装
使用 npm 安装：
npm install --save @pluesenpai/ngx-translate-po-http-loader
使用
引入
首先，在 app.module.ts 里面引入此模块并配置：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ---------------- --------------- - ---- ----------------------
------ - --------------------- - ---- -------------------------------------------
-----------
-------- -
-------------------------
------- -
-------- ----------------
----------- ------ ----------- -- --- --------------------------- --------------- -------
----- ------------
-
--
-
--
------ ----- --------- - -配置
在上面的示例代码中，我们使用了 TranslatePoHttpLoader 类来加载 PO 文件。
- http：HttpClient 对象，用于发送 HTTP 请求加载 PO 文件。
- '/assets/i18n'：PO 文件所在目录的相对路径。
- '.po'：PO 文件的后缀名。
获取翻译文本
在你的组件中，你可以使用 TranslateService 来获取翻译文本：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- ----------------------
------------
--------- -----------
--------- -
------ ------- - --------- -------
-
--
------ ----- ------------ -
------------------- ---------- ----------------- -
-------------------------------
--------------------
-
-其中，'Hello' 是一个翻译文本，在使用翻译服务的时候需要传入翻译文本的 key，这个 key 对应翻译文本在 PO 文件中的 key。
默认情况下，TranslateService 会加载 default.json 或者 default.xx.json 中的翻译文本，在用户切换语言时，会自动加载对应语言的翻译文件。（xx 代表你的语言代码）
示例
下面是一个使用 @pluesenpai/ngx-translate-po-http-loader 加载 PO 文件的简单示例：
PO 文件内容
翻译文本保存在 PO 文件中，如下所示，每个文本都有一个 key 和对应的翻译文本。
-- -------------------- ---- ------- ----- -- ------ -- -------------------- ------- ---------- ------------------- ---------- ------------- ------------------ ---------- ------------- ----------------- ------------- --------------- ----- ----------- ------------- ---------- -------- -------------- ------ -------------- ----------- ---------------- --------------------------- ------- -------------- ----------- ------------ ----- ------- ------ ----
加载 PO 文件
我们可以在 component 中使用 TranslateService 对象来获取翻译文本，例如：
-- -------------------- ---- -------
------ - ---------- - ---- -----------------------
------ - --------- - ---- ----------------
------ - ---------------- - ---- ----------------------
------ - --------------------- - ---- -------------------------------------------
------------
--------- -----------
--------- -
------ ------- - --------- -------
-
--
------ ----- ------------ -
------------------- ---------- ----------------- ------- ----- ----------- -
------------------------------------
-------------------------
------------------------
-
------------------ -
----- ------ - --- -------------------------------- ---------------- -------
----------------------------------- -----------------------------
----------------------------------- -----------------------------
-------------------------
-
-在上面的例子中，我们首先创建了一个 TranslatePoHttpLoader 对象，然后使用它的 getTranslation 方法来加载 PO 文件，并将其转换为可用的 JSON 格式。最后，我们将这些翻译文本注册到 TranslateService 实例中。
注意：如果你想加载多个语言，你需要将它们注册到 TranslateService 中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5851ab1864dac66dc9