随着全球化的发展，越来越多的网站需要支持多语言服务，而 Angular 提供了一种简单方便的方式来处理应用程序中的国际化。在本文中，我们将介绍如何在 Angular 项目中使用语言国际化。
翻译实现
翻译实现的过程中，我们需要安装 ngx-translate/core 和 ngx-translate/http-loader 依赖，分别负责提供核心功能和从服务端获取翻译文件。使用以下命令来安装这两个依赖。
npm install @ngx-translate/core @ngx-translate/http-loader --save
安装完成之后，我们需要配置 AppModule:
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ---------------- --------------- - ---- ----------------------
------ - ------------------- - ---- -----------------------------
------ - ----------------- ---------- - ---- -----------------------
------ - ------------ - ---- ------------------
-----------
------------- ---------------
-------- -
--------------
-----------------
-------------------------
------- -
-------- ----------------
----------- ------------------
----- -------------
--
---
--
---------- ---------------
--
------ ----- --------- --
------ -------- ----------------------- ----------- -
------ --- --------------------------
-在 AppModule 中，我们首先需要导入与国际化相关的所有模块和组件。接下来，我们通过调用 HttpLoaderFactory 函数来创建一个新的翻译文件加载器。该函数将在 Http 上下文中返回一个新的 TranslateHttpLoader 实例。
接下来，我们还需要在 AppModule 中导入 HttpClientModule 模块，以便我们可以从远程服务器获取翻译文件。最后，我们通过调用 TranslateModule.forRoot() 函数来告诉 Angular 如何使用我们新创建的翻译文件加载器。
我们还需要创建一个翻译文件，该文件将存储应用程序中使用的所有文本。 在常见的 Angular 项目中，我们可以将所有文本存储在 assets/i18n/ 目录中，例如:
-- -------------------- ---- ------- - -- ------------- -- ---- - -- ---- - -- ------- - - -- ----- - - - -- ------- - - - -- ------- - - - -- ------- - - -- --- - -- ------------- - -- --- - -- ---------- - -- ------- - -- ---
在这个目录下，我们应该有多个包含翻译信息的文件。例如 en.json 就可以这样写：
{
"key": "value",
}其中，key 为我们在程序代码中使用的键值，而 value 则为该键值对应的翻译内容。
在这里，我们需要注意：这里的 en.json 中的“en”是指“英语”，如果我们使用其他语言，则需要更改其名称。我们还需要确保使用与 AppModule 中 Loader 函数返回的 TranslateHttpLoader 实例相匹配的文件名。
在 HTML 模板中使用翻译
我们已经配置了 ngx-translate/core 和 ngx-translate/http-loader，现在我们可以开始使用它们来使 HTML 模板支持多语言。
首先，我们需要在 HTML 模板中引入 TranslateService 该服务。
import { TranslateService } from '@ngx-translate/core';然后，我们可以将该服务注入到我们的组件中。
constructor(public translate: TranslateService) {}最后，我们可以使用 translate 服务在 HTML 模板中渲染翻译内容。
<h1>{{ 'HELLO_WORLD' | translate }}</h1>在这里，我们使用管道 | translate ，它告诉 Angular 应用程序执行翻译操作。例如，使用 translate.instant('key') 可以在代码中获取翻译内容。
切换语言
我们已经使用 $translate 服务在我们的 HTML 模板中渲染了翻译内容，现在我们需要一个方法来切换语言。
首先，在我们的组件中，我们需要导入 TranslateService 服务，并注入到构造函数中。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- ----------------------
------------
--------- -----------
------------ -----------------------
--
------ ----- ------------ -
------------------- ---------- ----------------- --
------------------------ ------- -
-----------------------------
-
-这里，我们通过调用 use() 函数来改变应用程序的当前语言。该函数需要接受一种有效的语言代码作为参数，例如 en、fr 或 zh。
接下来，在我们的 HTML 模板中，我们需要使用按钮或其他用户接口元素，以便用户可以切换应用程序的语言。
<button (click)="switchLanguage('en')">英语</button>
<button (click)="switchLanguage('fr')">法语</button>
<button (click)="switchLanguage('zh')">中文</button>这里，我们将 switchLanguage() 函数作为元素的处理程序来绑定到每个按钮中。当用户单击按钮时，该函数将调用并改变当前语言。
结论
在这篇文章中，我们学习了如何在 Angular 项目中使用 ngx-translate/core 和 ngx-translate/http-loader 依赖，以实现多语言翻译。通过遵循上述步骤，我们可以在 Angular 应用程序中轻松实现语言国际化，让我们的应用程序支持各种不同的语言和文化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6715b8c0ad1e889fe218993e