前端开发需要大量的国际化支持，而 Angular 中最常用的翻译库就是 ngx-translate。但是，ngx-translate 的翻译文本并不总是易于理解和维护，这就有了一个 npm 包 pretty-ngx-translate。该工具可以将 ngx-translate 的 JSON 格式转换成易于读写和维护的 YML 格式。
安装和使用
安装
要开始使用 pretty-ngx-translate，首先需要将其安装到您的项目中：
$ npm install pretty-ngx-translate --save-dev
使用
让我们看看如何使用它。JSON 文件的格式通常如下所示：
{
"key1": "value1",
"key2": "value2"
}而使用 pretty-ngx-translate 后，会转换成以下格式的 YML 文件：
key1: value1 key2: value2
示例
假设您有一个名为 translation.json 的 JSON 文件，其内容如下所示：
{
"HELLO": "Hello, {{name}}!",
"TODAY": "Today is {{date, date:medium}}.",
"ONE_HOUR_AGO": "1 hour ago",
"HOUR_AGO": "{{hours}} hours ago",
}如果您使用 pretty-ngx-translate，它将会转换成以下格式的 YML 文件：
HELLO: Hello, {{name}}!
TODAY: Today is {{date, date:medium}}.
ONE_HOUR_AGO: 1 hour ago
HOUR_AGO: {{hours}} hours ago现在，您可以将该 YML 文件放入您的应用程序中，如下所示：
-- -------------------- ---- -------
------ - ---------------- ---------------- ---------------- - ---- ----------------------
------ - ------------------- - ---- -----------------------------
------ - -------- - ---- ----------------
------ - ----------------- ---------- - ---- -----------------------
------ - ------------- - ---- ----------------------------
-- --- ------
-- - ------------- ------------
-----------
------------- -
------------
--
-------- -
--------------
-----------------
-------------------------
------- -
-------- ----------------
----------- ------ ----------- -- -
------ --- ------------------------- ----------------- --------
--
----- ------------
-
--
--
---------- ---
---------- --------------
--
------ ----- --------- - -注意，我们已经将文件扩展名从 .json 改为了 .yml。
最后，在模板中使用 ngx-translate：
<div>{{ 'HELLO' | translate:{name: 'World'} }}</div> <!-- 显示 "Hello, World!" -->
<div>{{ 'TODAY' | translate:{date: currentDate} }}</div> <!-- 显示 "Today is Oct 27, 2019"（取决于当前日期） -->
<div>{{ 'HOUR_AGO' | translate:{hours: 5} }}</div> <!-- 显示 "5 hours ago" -->小结
这篇文章介绍了如何使用 npm 包 pretty-ngx-translate，将 Angular 中的 ngx-translate 中的 JSON 文件转换成易于读写和维护的 YML 文件。这个工具可以帮助您更快地维护和更新您的翻译文件，从而提高您的应用程序的国际化能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b6051ab1864dac67244