Angular 是一款流行的前端框架，它具有一些很好的国际化特性，可以轻松地实现多语言支持。在本篇文章中，我们将探讨如何使用 Angular 的国际化模块来支持多个语言。
国际化处理
国际化（Internationalization，简称 i18n）是指将应用程序或产品针对不同的语言和区域进行适应和调整的过程。在编写 web 应用时，我们需要确保用户可以使用自己的语言浏览网站。
如果我们只编写单一的语言版本的网站，将会限制我们的受众群体。但是，如果我们使用多语言支持，我们可以将我们的受众群体扩大到全球范围内的用户。
Angular 提供了一个很好的国际化模块，可以支持各种语言和文化。
准备工作
在本例中，我们需要启用 Angular 的 i18n 模块，并设置一个应用程序级别的语言环境。我们可以汇总我们的文本，并将其翻译成多种语言。
启用 i18n 模块
要启用 Angular 的 i18n 模块，我们需要在我们的应用程序根模块（通常是 app.module.ts）中引入 I18N_PROVIDERS，如下所示：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - --------- --------- - ---- ----------------
------ - -------------- - ---- ------------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
-------------
--
---------- -
- -------- ---------- --------- ------- --
--------------
--
---------- --------------
--
------ ----- --------- - -在上面的代码中，我们使用 LOCALE_ID 设置应用程序级别的语言环境。在本例中，我们将语言环境设置为英文（美国）。请注意，值必须是有效的区域设置代码。
汇总我们的文本
在应用程序中，我们需要汇总可本地化的所有文本并将其标记为需要翻译的文本。我们可以使用 Angular 的 i18n 标记来标记我们的文本。例如：
<h1 i18n>Welcome to my app</h1>
这将标记该元素为可本地化的，并设置其默认文本值（欢迎使用我的应用程序）。在运行应用程序之前，我们还需要提供翻译字符串，以便在运行时使用。
翻译文本
Angular 提供了一个称为 xtb 的 XML 文件格式，可以存储我们的应用程序的本地化翻译。每种语言的文件都应该有一个单独的 xtb 文件。
以下是一个示例 xtb 文件的段落：
-- -------------------- ---- ------- ----- ------------- ------------------ --------- ----------------- - --------- ----------------- --------------- --------- ----------------- ---- ----- ---------- --------- ----------- ---------- --------- ----------- -- ----- ---------- -- ------------------ ------------- ------------ ----------- -- -- ------------ -- -- ----------------- ------------ --------- ---- -- ----- ----------- ---- -- ----- ------------------ ---- ---------- --------------- --- --------------------
该文件包含一些文本，这些文本需要翻译成英文。
我们可以使用工具（比如：XLIFF Translator、SmartCAT、Crowdin、POEditor 等）将 xtb 文件翻译成其他语言。
实现多语言支持
在我们启用 i18n 模块并准备好我们的翻译文件之后，我们现在可以实现多语言支持。在 Angular 中，我们可以使用内置的模块 ngx-translate 来支持多语言。
安装 ngx-translate 模块
我们需要首先安装 ngx-translate 模块。我们可以使用 npm 包管理器来安装 ngx-translate。在应用程序的根目录中，运行以下命令：
npm install @ngx-translate/core --save
创建翻译服务
我们需要创建一个 ngx-translate 服务，并配置它以加载我们的 xtb 文件。在我们的应用程序中，我们可以通过创建一个新的文件 app.translation.ts 来完成此操作：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------------- ---------------- ---------------- - ---- ----------------------
------ - ---------- - ---- -----------------------
------ - ---------- - ---- -------
-------------
----------- ------
--
------ ----- --------------------- -
------- ----------- -------
------- ------------- ----
------------------- ---------- ----------------- ------- ----- ----------- -
----------------------------------
-----------------------
--------------- - --------
-
------------------ --------------- -
------ --- -------------------------- ---- -- -
---------------------------------------------------------------------
-------------- ---- -- -
----------------- - -------------
---------------------------------------------- --------------
----------------------------
--------------------
--
-- -- -
----------------- - ----------
----------------
--------------------
-
--
---
-
--------------------- -------- ---- -
--------------- - ---------
-----------------------------
-
------------------- -------- ------ -
-- -------------------- -
------ ----
-
------ ----------------------------
-
-
------ -------- -------------------------- ----------- -
------ --- ---------------------
-
------ ----- -------------- ---------- --------------- -
------------------- ----- ----------- - -
-------------------- -------- --------------- -
------ -------------------------------------------
-
-在上面的代码中，我们定义了一个名为 AppTranslationService 的服务，并注入翻译服务和 httpClient。该服务会将应用程序级别的语言环境设置为英文（美国）。
在 loadTranslation() 方法中，我们使用 httpClient 加载当前语言环境的 xtb 文件，并使用 ngx-translate 的翻译服务加载它。一旦加载完成，我们可以获得可翻译的文本。
在 useLanguage() 方法中，我们定义了一个方法，通过使用指定的语言环境来更新我们的 ngx-translate 翻译服务。
在 getTranslation() 方法中，我们首先检查是否已加载可翻译的文本；如果是，则使用我们的 ngx-translate 翻译服务的 instant() 方法查找翻译字符串。
在我们的服务中，我们还定义了一个 I18nHttpLoader 类，该类扩展了 ngx-translate 中的 TranslateLoader。这个类将负责使用 httpClient 来加载我们的 xtb 文件。
应用修饰符和指令
在我们的服务中完成之后，我们需要在我们的 HTML 模板中使用内置的 Angular i18n 修饰符和指令来支持多语言。例如：
<h1 i18n>Welcome to my app</h1>
<button (click)="changeLanguage('en-US')">English</button>
<button (click)="changeLanguage('es-ES')">Español</button>在上面的代码中，我们使用 i18n 修饰符将欢迎文本设置为可翻译的文本。在我们的按钮上，我们将单击事件绑定到 changeLanguage() 方法，该方法会更改我们的 ngx-translate 服务的语言环境。
使用 ngx-translate 支持多语言
现在我们已经完成了 ngx-translate 服务和应用程序中的路由和订阅程序，我们可以使用 ngx-translate 服务来实现应用程序的多语言支持。
以下是一个使用 ngx-translate 的供应商服务示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------------------- - ---- ----------------------------
------------
--------- -----------
------------ -----------------------
--
------ ----- ------------ -
------------------- ---------------------- ---------------------- -
---------------------------------------------
-
------------------------ ------- -
-------------------------------------------------
-
-在上面的代码中，我们注入 AppTranslationService 服务，并在构造函数中调用它的 loadTranslation() 方法来加载所有翻译文件。
我们还定义了一个 changeLanguage() 方法，该方法将通过将传递的语言环境名称传递给我们的服务来更改应用程序的语言环境。
结论
在本文中，我们已经学习了如何在 Angular 中实现多语言支持。我们了解了如何启用 i18n 模块，处理文本翻译和使用 ngx-translate 来实现多语言支持。我们还探讨了如何使用 Angular 的 i18n 修饰符和指令来支持多语言。
我们可以在应用程序级别上设置语言环境，并使用 xtb 文件来提供可供翻译的文本。通过在代码中使用 ngx-translate 服务，我们可以轻松地实现多语言支持，从而为全球用户提供更好的用户体验。
参考文献
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670dc9655f551281025e65c4