在全球范围内，不同国家和地区使用不同的语言进行交流与沟通。在网站和应用程序设计中，支持多语言的实现变得越来越重要。在本文中，我们将详细介绍在 Angular 中实现多语言支持的方法，包括利用 Angular i18n 和 ngx-translate 库实现多语言支持的方式。
Angular i18n
Angular i18n 是 Angular 核心库的一部分，它可以帮助您支持多语言并且在不同语言之间进行翻译。Angular i18n 使用 HTML 格式的属性来指定需要翻译的文字。这些属性具有特定的格式：
<!-- 普通文本 -->
<span i18n="description|meaning">Text to be translated</span>
<!-- 带变量的文本 -->
<span i18n="description|meaning@@gender">Hello, {gender, select, male {Mr.} female {Ms.} other {dear}} {name}!</span>其中 i18n 属性包含以下参数：
description（可选）：对元素进行描述的注释，便于开发者进行理解。meaning（可选）：确定该元素的翻译是什么。如果要翻译的文本与该元素的意义无关，则可以省略此参数。gender：变量的名称。{gender, select, male {Mr.} female {Ms.} other {dear}}：选择器，用于根据不同条件返回不同的值。
在上面的示例中，我们可以看到 i18n 属性的使用。在使用 i18n 属性时，您需要在 AppComponent 中添加以下代码以处理翻译：
-- -------------------- ---- -------
-- ---------------- --
------ - --------- - ---- ----------------
------ ------------------ ---- ----------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
--------------------------------------- -
-------------------------------
--------------------
-
-在 AppComponent 中，我们导入了 TranslateService 服务，并在构造函数中进行初始化。在 TranslateService 初始化后，我们设置了默认语言为英语（en），并使用了英语作为当前语言。
接下来，我们需要在应用程序中创建一个名为 locales 的目录，在该目录下，创建一个 JSON 文件，存储需要翻译的文本。例如，创建名为 en-US.json 的文件，然后将下面的 JSON 对象添加到该文件中：
{
"hello": "Hello, World!",
"bye": "Goodbye, World!"
}接着，在 HTML 模板中使用 translate 指令来转换需要翻译的文本。例如，在 HTML 模板中添加以下代码：
<h1>{{ 'hello' | translate }}</h1>在这里，我们使用了 translate 指令来转换 hello 的文本。 运行应用程序后，将会看到 hello 两个单词被翻译成了对应的语言。
ngx-translate
在不使用 Angular i18n 的情况下，您可以使用 ngx-translate 库来实现多语言支持。与 Angular i18n 相比，ngx-translate 提供了更多的灵活性和自定义选项。
首先，您需要安装 ngx-translate 库，使用以下命令进行安装：
npm install @ngx-translate/core --save npm install @ngx-translate/http-loader --save
接着，您需要在 app.module.ts 文件中导入 TranslateModule 、TranslateLoader 和 HttpModule：
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpModule, Http } from '@angular/http';然后，在上面导入的模块中添加以下代码：
-- -------------------- ---- -------
------ -------- --------------------------- ----- -
------ --- ------------------------- ------------------- ---------
-
-----------
-------- -
--------------
-----------
-------------------------
-------- ----------------
----------- ------------------------
----- ------
---
---
--
---
--在这里，我们使用了 createTranslateLoader 函数来指定我们需要调用的 JSON 文件。JSON 文件存放在 assets/locale 目录下并以 .json 结尾。您可以创建不同的 JSON 文件来存储不同语言的翻译。
接着，在 AppComponent 中初始化 TranslateService：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- ----------------------
------------
---
--
------ ----- ------------ -
------------------- ---------- ----------------- -
-- ---------
-------------------------------
-- -----------------
------------------------------------------
-
-在本示例中，我们设置了默认语言为英语，并使用浏览器中的语言作为当前语言。您还可以使用其他方法，例如用户指定的语言等。
最后，在 HTML 模板中使用 translate 指令来翻译文本，例如：
<h1>{{ 'HOME.WELCOME' | translate }}</h1>您还可以使用以下代码，在 TypeScript 文件中使用 TranslateService：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- ----------------------
------------
---
--
------ ----- ------------ -
------------------- ---------- ----------------- -
--------------------------------------------- ------- -- -
-----------------
---
-
-在这里，我们使用了 translate.get 方法和 subscribe。获取 'HOME.WELCOME' 的文本后，输出到控制台。
结论
在本文中，我们详细介绍了在 Angular 中实现多语言支持的方法，包括使用 Angular i18n 和 ngx-translate 库。您可以根据您的需求选择适合您的方法。无论您使用哪种方法，多语言支持都是非常重要的，它可以帮助您更好地跨越国界，为不同语言的用户提供更好的使用体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f266fda44b36ee5765d89a