在构建多语言 Angular 应用程序之前，我们需要了解 Angular 的国际化以及如何通过使用 Angular 提供的工具来支持多语言应用程序。
Angular 的国际化
Angular 提供了国际化（i18n）工具来支持多语言应用程序。i18n 是一个 UI 文本本地化的过程，使应用程序可以根据用户的语言和文化习惯自动切换文本内容。
Angular 的 i18n 工具使用 ICU（International Components for Unicode）来处理复杂的文本和格式化语法。
Angular 的国际化方案
Angular 的国际化方案分为两个部分：翻译和本地化。翻译是将源代码中的文本转换为其他语言的过程，而本地化是通过提供特定于语言和地区的格式化来调整文本内容。
在 Angular 中，使用以下步骤来实现多语言支持：
- 在组件模板中标记需要本地化的文本。
- 使用 Angular 提供的 i18n 工具来翻译和本地化这些文本。
- 为每种语言创建一个区域设置文件，定义文本翻译以及特定于语言和地区的格式化。
- 使用 Angular CLI 提供的工具来提取所有需要翻译和本地化的文本，并把它们放到一个单独的翻译文件中。
- 让翻译者进行翻译，并将翻译结果添加到翻译文件中。
- 使用 Angular CLI 提供的工具来生成特定语言的本地化文件。
Angular 的多语言应用程序
在 Angular 中，为了支持多语言应用程序，我们需要使用 NgxTranslate 库。NgxTranslate 是一个 Angular 服务，它可以管理文本的翻译和本地化。
下面是一个演示如何使用 NgxTranslate 的示例代码：
首先安装 NgxTranslate 库：
npm install @ngx-translate/core --save npm install @ngx-translate/http-loader --save
接下来，我们需要在根模块中导入 NgxTranslateModule 和 HttpLoaderModule，以及 HttpClientModule：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------- ---------- - ---- -----------------------
------ - ---------------- --------------- - ---- ----------------------
------ - ------------------- - ---- -----------------------------
-----------
-------- -
--------------
-----------------
-------------------------
------- -
-------- ----------------
----------- ------ ----------- -- -
------ --- ------------------------- ----------------- ---------
--
----- ------------
-
--
--
-------- ------------------
--
------ ----- --------- --上述代码中，我们导入了 NgxTranslateModule、HttpClientModule 和 HttpLoaderModule，并在模块定义中进行配置。我们将 TranslateHttpLoader 的加载器配置为使用 HttpClient 从 i18n 目录中加载 JSON 文件。
接下来，我们需要为每个支持的语言创建一个 JSON 文件。例如，我们可以创建一个名为 en.json 的文件，其中包含以下内容：
{
"HELLO": "Hello",
"WORLD": "World"
}接下来，在组件中，我们可以使用 TranslateService 将文本翻译为所需的语言：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- ----------------------
------------
--------- -----------
--------- -
------ ------- - --------- -------
------ ------- - --------- -------
------- -----------------------------------------------
------- ------------------------------------------------
--
--
------ ----- ------------ -
------------------- ---------- ----------------- -
-------------------------------
-
------------------------ ------- -
-----------------------------
-
-在上述代码中，我们使用 TranslateService 来加载 JSON 文件中的文本，并将其翻译为所需的语言。
总结
本文介绍了如何在 Angular 中构建多语言应用程序。我们了解了 Angular 的国际化以及如何使用 NgxTranslate 库来支持多语言应用程序。我们通过一个示例代码演示了如何使用 TranslateService 来翻译和本地化文本，并动态切换应用程序语言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f36a5ff6b2d6eab3cd272c