随着全球化的发展，越来越多的网站和应用需要支持多语言。在 Angular 应用中实现国际化（i18n）可以让用户在自己熟悉的语言环境下使用应用，提高用户体验和用户满意度。本文将介绍 Angular 应用中实现国际化的方法，并提供示例代码和指导意义。
什么是国际化
国际化（i18n）是将应用程序或网站设计成可以适应不同语言和文化的能力。这种能力是通过将应用程序或网站的用户界面和输出翻译成不同的语言和文化来实现的。
Angular 提供了一种称为 @angular/localize 的内置库，可以帮助我们在应用程序中实现国际化。下面是实现国际化的步骤：
1. 安装 @angular/localize
在终端中运行以下命令安装 @angular/localize：
npm install @angular/localize
2. 配置应用程序
要配置应用程序以支持国际化，需要在 angular.json 文件中添加以下配置：
"i18n": {
"sourceLocale": "en-US",
"locales": {
"fr": "src/locale/messages.fr.xlf",
"es": "src/locale/messages.es.xlf",
"zh-CN": "src/locale/messages.zh-CN.xlf"
}
}其中：
sourceLocale是源语言环境，也就是默认语言环境。locales是一个对象，包含所有支持的语言环境及其对应的翻译文件路径。- 翻译文件的格式是 XLIFF（XML Localization Interchange File Format），可以使用任何文本编辑器进行编辑。
3. 在模板中使用翻译
要在模板中使用翻译，可以使用 Angular 的内置指令 i18n。例如：
<h1 i18n="@@welcome">Welcome to my app!</h1>
其中：
i18n指令的值@@welcome是翻译标识符，可以用于在翻译文件中查找相应的翻译文本。Welcome to my app!是默认文本，如果没有找到相应的翻译文本，则会显示默认文本。
4. 提取翻译
要提取翻译，可以运行以下命令：
ng extract-i18n --output-path src/locale
这将提取所有带有 i18n 指令的文本，并将其保存到 src/locale 目录下的 XLIFF 文件中。
5. 编译翻译
要编译翻译，可以运行以下命令：
ng build --prod --localize
这将编译所有支持的语言环境，并将其保存在 dist 目录下的不同文件夹中。
6. 运行应用程序
要运行应用程序以查看国际化效果，可以运行以下命令：
ng serve --configuration=<locale>
其中 <locale> 是要运行的语言环境，例如 fr、es 或 zh-CN。
示例代码
下面是一个简单的 Angular 应用程序，演示了如何实现国际化：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- ----------------------
------------
--------- -----------
--------- -
--- ------------------------ -- -- ---------
-- ------------------------- -- - ---- --- --- -------------------------
------- -----------------------------------------------
------- ------------------------------------------------
------- -----------------------------------------------
------- ---------------------------------------------
-
--
------ ----- ------------ -
------------------- ---------- ----------------- --
------------------------ ------- -
-----------------------------
-
-在 app.module.ts 中，需要导入 TranslateModule 和 TranslateLoader：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------- ---------- - ---- -----------------------
------ - ---------------- --------------- - ---- ----------------------
------ - ------------------- - ---- -----------------------------
------ - ------------ - ---- ------------------
------ -------- ----------------------- ----------- -
------ --- ------------------------- ------------------- ---------
-
-----------
------------- ---------------
-------- -
--------------
-----------------
-------------------------
------- -
-------- ----------------
----------- ------------------
----- ------------
-
--
--
---------- --------------
--
------ ----- --------- --在 assets/locale 目录下，需要创建一个 JSON 文件，包含所有支持的语言环境及其对应的翻译文本：
-- -------------------- ---- -------
-
----- -
------------ -------- -- -- ------
---------------- ----- -- - ---- --- --- ----------------------
--
----- -
------------ ---------- --- --- --------------
---------------- ----- --- --- ----------- -- ------------- ---- ------------------------
--
----- -
------------ ----------- - -- -------------
---------------- ----- -- --- ---------- -- ------------ ---- -- ----------------------
--
-------- -
------------ --------------
---------------- -------------------
-
-指导意义
实现国际化可以提高应用程序的可用性和可访问性，使更多的用户可以在自己熟悉的语言环境下使用应用程序。在 Angular 应用程序中，实现国际化非常简单，只需要使用 @angular/localize 和 @ngx-translate/core 这两个库。
在实现国际化时，需要注意以下几点：
- 在模板中使用
i18n指令，并为其提供翻译标识符。 - 在
angular.json文件中配置支持的语言环境及其对应的翻译文件路径。 - 提取翻译和编译翻译时，需要使用
ng extract-i18n和ng build --prod --localize命令。 - 在运行应用程序时，需要使用
ng serve --configuration=<locale>命令指定要运行的语言环境。 - 在实现国际化时，需要考虑一些特殊的情况，例如复数形式、日期和时间格式等。
总之，实现国际化可以提高用户体验和用户满意度，在开发 Angular 应用程序时，应该考虑国际化的支持。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67da53e2a941bf71342434ed
