随着互联网的发展，越来越多的应用需要支持多语言，以满足不同地区、不同语言的用户需求。Angular 是一款流行的前端框架，提供了强大的国际化支持，可以方便地编写多语言应用。本文将介绍如何使用 Angular 实现国际化应用。
1. 安装必要的依赖
首先，需要安装 @angular/localize 和 @ngx-translate/core 两个依赖。它们分别提供了 Angular 的本地化和翻译功能。
npm install @angular/localize @ngx-translate/core --save
2. 配置本地化
在 app.module.ts 文件中，引入 @angular/localize 模块，并调用 registerLocaleData 方法注册本地化信息。假设需要支持英语和中文两种语言，可以这样写：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------------ - ---- ------------------
------ -------- ---- -----------------------------
------ -------- ---- -----------------------------
------ - ------------ - ---- ------------------
---------------------------- ------
---------------------------- ------
-----------
------------- -
------------
--
-------- -
-------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -3. 配置翻译
在 app.module.ts 文件中，引入 @ngx-translate/core 模块，并调用 use 方法配置翻译信息。假设需要支持英语和中文两种语言，可以这样写：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------------ - ---- ------------------
------ -------- ---- -----------------------------
------ -------- ---- -----------------------------
------ - ---------------- --------------- - ---- ----------------------
------ - ------------------- - ---- -----------------------------
------ - ----------- ---------------- - ---- -----------------------
------ - ------------ - ---- ------------------
---------------------------- ------
---------------------------- ------
------ -------- ----------------------- ----------- -
------ --- ------------------------- ----------------- ---------
-
-----------
------------- -
------------
--
-------- -
--------------
-----------------
-------------------------
------- -
-------- ----------------
----------- ------------------
----- ------------
-
--
--
---------- ---
---------- --------------
--
------ ----- --------- - -在上面的代码中，TranslateHttpLoader 用于加载翻译文件，HttpLoaderFactory 方法用于创建 TranslateHttpLoader 实例，TranslateModule 用于配置翻译信息。
翻译文件的命名规则为 language-code.json，例如 en.json 和 zh.json，放在 assets/i18n/ 目录下。翻译文件的内容如下：
{
"HELLO": {
"MESSAGE": "Hello, world!"
}
}4. 使用翻译
在组件中，可以使用 TranslateService 来获取翻译内容。假设需要在模板中显示 HELLO.MESSAGE 的翻译内容，可以这样写：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- ----------------------
------------
--------- -----------
--------- -
------ --------------- - --------- -------
------- --------------------------------- -----------------
-
--
------ ----- ------------ -
------------------- ----------------- ----------------- -
-------------------------------------------
--------------------------------
-
---------------- -
-- ---------------------------------- --- ----- -
--------------------------------
- ---- -
--------------------------------
-
-
-在上面的代码中，translate 管道用于获取翻译内容。setDefaultLang 方法用于设置默认语言，use 方法用于设置当前语言。switchLanguage 方法用于切换语言。
5. 总结
本文介绍了如何使用 Angular 实现国际化应用，包括配置本地化和翻译，以及使用翻译。希望本文对读者有所帮助。完整示例代码可以在 GitHub 上找到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65669ec3d2f5e1655df9b3c1