前言
随着全球化的发展，越来越多的应用需要支持多语言。在前端开发中，国际化（i18n）是实现多语言的一种常用方式。在 Angular 应用中，我们可以使用 Angular 提供的 i18n 功能来实现多语言支持。
本文将介绍如何在 Angular 应用中使用 i18n，包括如何配置、如何使用和如何实现动态语言切换。
配置 i18n
安装依赖
首先，我们需要安装 @angular/localize 和 @ngx-translate/core 依赖：
npm install @angular/localize @ngx-translate/core --save
配置 i18n 文件
在 Angular 应用中，我们需要创建多个 i18n 文件来存储不同语言的文本。这些文件通常存储在 src/assets/i18n 目录下。
下面是一个简单的 i18n 文件示例：
{
"HELLO": "你好，世界！",
"WELCOME": "欢迎来到我的应用！"
}在这个文件中，我们定义了两个文本字符串 HELLO 和 WELCOME。
配置 Angular 根模块
在 Angular 根模块中，我们需要导入 TranslateModule 和 TranslateLoader，并且配置 TranslateModule：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ----------------- ---------- - ---- -----------------------
------ - ---------------- --------------- - ---- ----------------------
------ - ------------------- - ---- -----------------------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
-----------------
-------------------------
---------------- -----
------- -
-------- ----------------
----------- ------ ----------- -- -
------ --- ------------------------- ----------------- ---------
--
----- ------------
-
--
--
---------- ---
---------- --------------
--
------ ----- --------- - -在这个配置中，我们指定了默认语言为英语（en），并且指定了 TranslateLoader 的工厂函数，用来加载 i18n 文件。
使用 i18n
在 Angular 应用中，我们可以使用 translate 指令来实现多语言支持。下面是一个简单的示例：
<h1>{{ 'HELLO' | translate }}</h1>
<p>{{ 'WELCOME' | translate }}</p>在这个示例中，我们使用 translate 指令来显示 i18n 文件中定义的文本。
实现动态语言切换
在 Angular 应用中，我们可以通过 TranslateService 来实现动态语言切换。下面是一个简单的示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- ----------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------- ----------------- ----------------- -
-------------------------------------------
--------------------------------
-
------------------------ ------- -
------------------------------------
-
-在这个示例中，我们通过 TranslateService 来实现动态语言切换。我们定义了一个 switchLanguage 方法，用来切换语言。在这个方法中，我们调用了 use 方法来切换语言。
总结
在本文中，我们介绍了如何在 Angular 应用中使用 i18n，包括如何配置、如何使用和如何实现动态语言切换。通过使用 i18n，我们可以轻松地实现多语言支持，使我们的应用更加全球化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6609934ed10417a22284798e