随着全球化和国际化的发展，越来越多的网站和移动应用需要支持多种语言。在 Angular 中，我们可以使用 Ngx-translate 库来实现多语言应用开发。本文将介绍 Ngx-translate 的基本用法以及高级特性，帮助读者了解如何使用 Ngx-translate 开发多语言应用。
安装和使用
首先，我们需要在 Angular 项目中安装 Ngx-translate。可以使用以下命令来安装：
npm install @ngx-translate/core @ngx-translate/http-loader --save
安装完成后，我们需要在 app.module.ts 中导入 Ngx-translate，然后在 NgModule 的 providers 数组中注入 TranslateService 和 TranslateLoader。
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ----------------- ---------- - ---- -----------------------
------ - ---------------- --------------- - ---- ----------------------
------ - ------------------- - ---- -----------------------------
------ - ------------ - ---- ------------------
------ -------- ----------------------- ----------- -
------ --- --------------------------
-
-----------
------------- -
------------
--
-------- -
--------------
-----------------
-------------------------
------- -
-------- ----------------
----------- ------------------
----- ------------
-
--
--
---------- ---
---------- --------------
--
------ ----- --------- - -在上述代码中，我们通过 HttpLoaderFactory 函数来创建 TranslateHttpLoader 实例，并注入 HttpClient。然后将其作为 TranslateLoader 的 provider 使用。
接下来，我们需要在 AppComponent 中注入 TranslateService，并使用它来加载和切换语言。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- ----------------------
------------
--------- -----------
--------- -
------ ------- - --------- -------
------- --------------------------------- -----------------
-
--
------ ----- ------------ -
------------------- ---------- ----------------- -
-------------------------------
-
---------------- -
--------------------------------------------- --- ---- - ---- - ------
-
-在上述代码中，我们在 AppComponent 构造函数中设置默认语言为英语。然后，在 switchLanguage 方法中使用 TranslateService 来切换当前语言。当用户点击 Switch Language 按钮时，我们将当前语言从英语切换到法语，反之亦然。
现在可以尝试启动 Angular 应用，并切换语言来验证 Ngx-translate 是否正常工作。
翻译文本
在多语言应用中，我们需要将视图中的文本翻译为多种语言。在 Ngx-translate 中，我们可以使用 translate pipe 来翻译文本。例如：
<h1>{{ 'HELLO' | translate }}</h1>在上述代码中，我们使用 'HELLO' 作为翻译键值，并使用 translate pipe 将其翻译为当前语言的文本。当用户切换语言时，translate pipe 会自动更新视图中的文本。
如果要翻译的文本中包含变量，我们可以在 translate pipe 中使用参数来替换变量。例如：
<p>{{ 'HELLO_NAME' | translate: { name: name } }}</p>在上述代码中，我们使用 'HELLO_NAME' 作为翻译键值，并将一个对象传递给 translate pipe，该对象包含一个 name 属性。在翻译文本中，我们可以使用 {{ name }} 语法来引用变量。
支持多种语言
Ngx-translate 支持多种语言，包括中文、日语、法语、西班牙语等等。我们可以在 TranslateModule.forRoot 中通过 langs 属性来指定支持的语言列表。例如：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ----------------- ---------- - ---- -----------------------
------ - ---------------- --------------- - ---- ----------------------
------ - ------------------- - ---- -----------------------------
------ - ------------ - ---- ------------------
------ -------- ----------------------- ----------- -
------ --- --------------------------
-
-----------
------------- -
------------
--
-------- -
--------------
-----------------
-------------------------
------- -
-------- ----------------
----------- ------------------
----- ------------
--
------ ------ ----- -----
--
--
---------- ---
---------- --------------
--
------ ----- --------- - -在上述代码中，我们通过 langs 属性指定了支持的语言列表为英语、法语和中文。我们还需要在对应的 language-xx.json 文件中定义翻译文本，例如：
src/assets/i18n/language-en.json:
{ "HELLO": "Hello", "HELLO_NAME": "Hello, {{name}}!" }src/assets/i18n/language-fr.json:
{ "HELLO": "Bonjour", "HELLO_NAME": "Bonjour, {{name}} !" }src/assets/i18n/language-zh.json:
{ "HELLO": "你好", "HELLO_NAME": "{{name}}，您好！" }
每个语言都需要定义相同的翻译键值，但在不同语言中的翻译文本不同。例如，在英语中，'HELLO' 的翻译文本为 'Hello'，而在中文中，'HELLO' 的翻译文本为 '你好'。
动态加载语言包
在某些情况下，我们可能需要动态加载语言包，例如从后端服务获取语言包。在 Ngx-translate 中，我们可以使用 TranslateService 的 load 方法来动态加载语言包。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- ----------------------
------------
--------- -----------
--------- -
------ ------- - --------- -------
------- -----------------------------------------------
------- ------------------------------------------------
------- ----------------------------------------
-
--
------ ----- ------------ -
------------------- ---------- ----------------- --
-------------------- ------- -
-------------------------
-
------------------ ------- -
--------------------------------------------------- -- -
----------------------------------- -----
-------------------------
---
-
-在上述代码中，我们使用 changeLanguage 方法来切换已经加载的语言，使用 loadLanguage 方法来动态加载语言包。在 loadLanguage 方法中，我们首先使用 getTranslation 方法从后端服务获取语言包。然后使用 setTranslation 方法将语言包保存到 TranslateService 中，并使用 use 方法来使用该语言包。
统一管理语言包
如果一个应用中有多个模块和组件，可能存在多个语言包需要管理。在 Ngx-translate 中，我们可以使用 TranslateService 的 addLangs、setDefaultLang 和 use 方法来统一管理语言包。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- ----------------------
------------
--------- -----------
--------- -
------ ------- - --------- -------
------- ----------- ---- -- ------ --------------------------------- ---- -----------
-
--
------ ----- ------------ -
----- - ------ ----- ------
------------------- ---------- ----------------- -
-------------------------------
-------------------------------
--------------------
-
-------------------- ------- -
-------------------------
-
-在上述代码中，我们使用 addLangs 方法添加支持的语言列表，使用 setDefaultLang 方法设置默认语言为英语。然后使用 use 方法来使用指定的语言。这样，即使多个组件管理自己的语言包，也可以通过 TranslateService 统一管理语言包。
总结
在本文中，我们介绍了如何在 Angular 中使用 Ngx-translate 进行多语言应用开发。我们学习了 Ngx-translate 的基本用法以及高级特性，包括翻译文本、支持多种语言、动态加载语言包和统一管理语言包等。希望本文能够帮助读者了解如何使用 Ngx-translate 开发多语言应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646e0a90968c7c53b0ca28c2