在开发前端应用时，国际化是必不可少的一项功能。ngx-translate-parser-plural-select 是一个 npm 包，可以方便开发者实现带复数形式翻译的国际化。
本篇文章将详细介绍如何使用 ngx-translate-parser-plural-select，包括使用步骤、代码示例和注意事项等。
步骤
安装 ngx-translate-parser-plural-select
在使用 ngx-translate-parser-plural-select 之前，我们需要先安装它。可以通过以下命令进行安装：
npm install --save ngx-translate-parser-plural-select
导入 ngx-translate-parser-plural-select
在应用中的 app.module.ts 中导入 ngx-translate-parser-plural-select 依赖：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - --------------- - ---- ----------------------
------ - --------------- - ---- ----------------------
------ - ------------------- - ---- -----------------------------
------ - ----------------- ---------- - ---- -----------------------
------ - ------------------ - ---- -------------------------------------
-----------
------------- ---------------
-------- -
--------------
-----------------
-------------------------
---------------- -----
------- -
-------- ----------------
----------- ------ ----------- --
--- ------------------------- ----------------- ---------
----- -------------
--
------- -
-------- ----------------
----------- -------------------
--
---
--
---------- ---------------
--
------ ----- --------- --在这里，我们导入了另外两个 ngx-translate 的核心模块：TranslateLoader 和 TranslateHttpLoader，可以实现使用 Http 请求加载翻译文件。之后，我们在 imports 中配置了默认语言和路径以及解析器使用了刚刚导入的 pluralSelectParser。
在翻译文件中添加复数形式的翻译
下面是一个简单的翻译文件 translate.en.json 的例子，它包含了一个简单的翻译字符串和一个复数形式的翻译字符串：
{
"HELLO": "Hello!",
"GREETINGS": {
"zero": "No Greetings",
"one": "One Greeting",
"other": "{{count}} Greetings"
}
}在这个翻译文件中，GREETINGS 的复数形式采用了 {count} 占位符，并且又分为 zero、one 和 other 三种形式，其中 zero 代表数量为 0 时的形式，one 代表数量为 1 时的形式，other 则代表其他数量时的形式。
在组件中使用翻译
在组件中使用 ngx-translate-parser-plural-select 进行翻译的代码如下：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- ----------------------
------------
--------- -----------
--------- -
------ ------- - --------- -------
---- -------------- ------
------- --------------------
------- --------------------
------- --------------------
------- --------------------
------- ----------------------
---------
------
------- ----------- - ---------- - ------ ----- - --------
--
--
------ ----- ------------ -
----- - ---------------------
----- - --
------------------- ---------- ----------------- -
-------------------------------
-
-在这个代码中，我们首先在模板中用 {{ 'HELLO' | translate }} 的方式获取了一个简单的翻译字符串的值，用 translate 管道对字符串进行了翻译。
在下面一段代码中，我们用了一个 <select> 元素，实现了翻译数量的选择。最后，我们又用 {{ 'GREETINGS' | translate: { count: count } }} 计算出需要显示的复数形式的翻译结果，并输出到了页面上。
注意事项
- 需要安装 ngx-translate 和 ngx-translate-parser-plural-select
- 不支持读取
example.i18n.yaml（通过配置清单，这个可以迁移到翻译模块上） - 复数形式的翻译采用了
{count}占位符，并且又分为zero、one和other三种形式，其中zero代表数量为 0 时的形式，one代表数量为 1 时的形式，other则代表其他数量时的形式。
总结
有了 ngx-translate-parser-plural-select，我们就可以方便地实现带复数形式翻译的国际化，从而更加轻松地实现跨国际化的移动应用开发。在使用它时，需要注意翻译文件的格式和命名、复数形式字符串的占位符以及 API 的使用等问题，以便我们快速地进行开发和调试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056ff781e8991b448e7c49