在现代化的应用程序中，多语言支持已经成为了一个必备的功能，尤其是对于全球化的企业和组织来说。而在 Angular 中，实现多语言切换也是非常简单的。在本篇文章中，我们将介绍如何在 Angular 应用程序中实现多语言切换功能。
1. 安装依赖
首先，我们需要安装 @ngx-translate/core 和 @ngx-translate/http-loader 这两个依赖。@ngx-translate/core 是一个 Angular 中的国际化（i18n）库，而 @ngx-translate/http-loader 则是该库的一个 HTTP 加载器，它可以从后端服务器获取翻译文件。
npm install @ngx-translate/core @ngx-translate/http-loader
2. 配置翻译文件
接下来，我们需要在应用程序中配置翻译文件。可以在 src/assets/i18n/ 目录下创建一个文件夹来存放不同语言的翻译文件，例如：
src/assets/i18n/ ├── en.json ├── fr.json └── zh.json
在每个翻译文件中，我们需要定义一个 JSON 对象来存储不同的翻译文本，例如：
// en.json
{
"hello": "Hello",
"world": "World"
}// fr.json
{
"hello": "Bonjour",
"world": "le monde"
}// zh.json
{
"hello": "你好",
"world": "世界"
}3. 配置翻译服务
在 app.module.ts 文件中，我们需要导入 TranslateModule 和 TranslateHttpLoader 并将其添加到 imports 数组中。同时，我们还需要创建一个 TranslateService 的实例，并在 providers 数组中注册。
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ----------------- ---------- - ---- -----------------------
------ - ---------------- ---------------- ---------------- - ---- ----------------------
------ - ------------------- - ---- -----------------------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
-----------------
-------------------------
------- -
-------- ----------------
----------- ------ ----------- -- -
------ --- ------------------------- ----------------- ---------
--
----- ------------
-
--
--
---------- -------------------
---------- --------------
--
------ ----- --------- -
------------------- ---------- ----------------- -
-- ------
------------------------------------
-- ------
------------------------------ ----- -------
-- -------
----- ----------- - --------------------------------
-- -------
------------------------------------------------ - ----------- - ------
-
-在上面的代码中，我们首先导入了 TranslateModule、TranslateLoader、TranslateService 和 TranslateHttpLoader，并将其添加到 imports 数组中。然后，在 providers 数组中注册了一个 TranslateService 的实例。在 constructor 中，我们设置了默认语言为英语，并将可用语言设置为英语、法语和中文。接下来，我们获取了浏览器的语言，并使用它来设置应用程序的语言。
4. 在模板中使用翻译文本
在模板中，我们可以使用 translate 指令来引用翻译文本。例如，我们可以使用 {{ 'hello' | translate }} 来引用 hello 的翻译文本。
<h1>{{ 'hello' | translate }}, {{ 'world' | translate }}!</h1>5. 切换语言
最后，我们需要在应用程序中添加一个语言切换功能。我们可以使用 TranslateService 的 use 方法来设置应用程序的语言。例如，我们可以在一个按钮的点击事件中调用 translate.use('fr') 来将应用程序的语言设置为法语。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- ----------------------
------------
--------- -----------
--------- -
------ ------- - --------- --- -- ------- - --------- --------
------- -----------------------------------------------
------- ------------------------------------------------
------- ------------------------------------------
-
--
------ ----- ------------ -
------------------- ---------- ----------------- --
-------------------- ------- -
-------------------------
-
-在上面的代码中，我们在模板中添加了三个按钮，分别用于切换英语、法语和中文。在每个按钮的点击事件中，我们调用了 switchLanguage 方法，并将语言代码作为参数传递给它。在 switchLanguage 方法中，我们使用 TranslateService 的 use 方法来设置应用程序的语言。
总结
在本篇文章中，我们介绍了如何在 Angular 应用程序中实现多语言切换功能。我们首先安装了 @ngx-translate/core 和 @ngx-translate/http-loader 这两个依赖，然后在应用程序中配置了翻译文件，接着配置了翻译服务，并在模板中使用了翻译文本。最后，我们添加了一个语言切换功能，使用 TranslateService 的 use 方法来设置应用程序的语言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ceddffadd4f0e0ff838a65