本地化（Localization）是一项在软件中广泛使用的技术，使得软件可以在不同的国家和文化环境下运行。对于以 Angular 为基础的前端应用程序而言，使用本地化功能是非常必要的，因为这可以帮助开发人员更好地识别和处理不同语言、数字、日期和货币等本地化数据。
在本文中，我们将介绍如何在 Angular 中使用本地化功能，以及如何在 Angular 应用程序中将其实现。本文将详细阐述 Angular 中本地化的工作原理，以及如何使用 ngx-translate 库来实现本地化。
Angular 中本地化的工作原理
Angular 中实现本地化的基本工作原理是将所有要用到的文本字符串和数据集合存储在统一的地方，并将其标记为本地化文本。当应用程序需要在个用户使用不同语言和区域设置时被翻译时，Angular 将会查询应用中所有的本地化文本，并将它们翻译成正确的语言和区域设置。
Angular 集成了很多本地化实现，包括日期本地化、数字本地化和货币本地化。开发人员也可以使用 i18n 开启一个文本本地化处理过程，来帮助 Angular 提供局部化的翻译。当然，如果你需要一些高级功能，例如复数和几种更高级的日期格式选项，你也可以使用第三方本地化库，例如 ngx-translate。
如何使用 ngx-translate 实现本地化
在本文中，我们将使用 ngx-translate 库来实现本地化。ngx-translate 是一个功能强大的 JavaScript 库，可以让你轻松地在 Angular 应用程序中添加本地化支持。下面是如何使用 ngx-translate 来实现本地化的示例。
首先，我们需要安装 ngx-translate 和 @ngx-translate/core 库。我们可以使用 npm 来完成此操作：
npm install ngx-translate --save npm install @ngx-translate/core --save
接下来，我们需要在 Angular 应用程序中引入 ngx-translate 库。在 app.module.ts 文件中添加以下代码：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ---------------- --------------- - ---- ----------------------
------ - ------------------- - ---- -----------------------------
------ - ----------------- ---------- - ---- -----------------------
-----------
------------- -
------------
--
-------- -
--------------
-----------------
-------------------------
------- -
-------- ----------------
----------- ------ ----------- -- -
------ --- ------------------------- ----------------- ---------
--
----- ------------
-
--
--
---------- ---
---------- --------------
--
------ ----- --------- - -上面的代码中，我们引入了 HttpClientModule 和 TranslateHttpLoader，这些模块用于支持 Angular Http 模块和用于加载变换的 ngx-translate 库。我们还使用 TranslateModule.forRoot() 方法来对 ngx-translate 库进行初始化。通过 loader 属性，ngx-translate 库可以读取特定目录中的 JSON 文件，JSON 文件包含了应用数据的翻译字段。
接下来，我们需要创建我们的 JSON 翻译文件，以便 ngx-translate 库可以读取它们。在 src/assets/i18n 目录下创建一个叫做 en.json 的文件，并添加以下内容：
{
"HELLO": "Hello",
"WELCOME": "Welcome!",
"GREETING_NAME": "Hello {{ name }}!"
}上面的 JSON 文件包含了三个翻译字段：HELLO、WELCOME 和 GREETING_NAME。我们可以将这些字段用于应用中的任何地方。
让我们看看如何在 Angular 应用程序中使用这些字段：
<h1>{{ 'HELLO' | translate }}</h1>
<p>{{ 'WELCOME' | translate }}</p>
<p>{{ 'GREETING_NAME' | translate:{ name: "John" } }}</p>上面的代码中，我们可以使用 Angular 模板语法来显示翻译后的字符串。通过使用 | translate 管道操作符，Angular 将查找包含 'HELLO'、“'WELCOME'”和“'GREETING_NAME'”翻译字段的 JSON 文件，并将它们翻译成应用程序当前的区域设置和语言。在“GREETING_NAME”字符串中，我们使用了名为“name”的变量，它会被传递到管道操作符的翻译器中，并将其替换为“John。
但是，我们还需要设置应用程序的默认语言。在 app.component.ts 文件中，我们可以使用 translateService.setDefaultLang 方法将默认语言设置为英语：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- ----------------------
------------
--------- -----------
------------ -----------------------
---------- ------------------------
--
------ ----- ------------ -
----- - ---------
------------------- ----------------- ----------------- -
-------------------------------------------
--------------------------------
-
-在这里，我们使用了 TranslateService 类来设置默认语言。我们将默认语言设置为英语，但是你可以选择任何你想要的语言。如果你打算提供多种语言支持，你可以使用 TranslateService 类中的 use 方法来改变应用程序中使用的语言。
总结
在 Angular 应用程序中使用本地化功能是一项非常必要和强大的技术。在本文中，我们详细地阐述了 Angular 中本地化的工作原理，以及如何使用 ngx-translate 库来实现本地化。我们希望这篇文章可以帮助你更好地理解 Angular 中的本地化，并为你的应用程序提供支持。如果你想学习更多关于 Angular 的知识，请查看 Angular 文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6471e2fb968c7c53b0fce644