在今天的全球化语境下，一个应用程序必须面向多语言受众。而 i18n（国际化）是解决这一问题的方法之一。本文将介绍 Angular 应用中使用 i18n 的最佳实践，包括如何配置 i18n，如何在代码中使用 i18n，并提供一些示例代码。
什么是 i18n？
i18n 是英语中 "internationalization" 的简写，意思是“国际化” 。它是一种编写代码以适应不同发布区域语言和文化的技术。在开发国际化应用程序时，i18n 是非常有用的，它可以方便地支持多个语言和文化，包括日期和时间格式、货币格式和数字格式等。
Angular 中使用 i18n 的需求
在 Angular 应用中使用 i18n 的主要用途是为多语言受众提供相应的本地化文本。在缺少这种本地化支持的情况下，许多受众可能会遭受沟通障碍、操作困难或不愿意使用产品。
如何在 Angular 应用中使用 i18n
Step 1: 安装 Angular 的 i18n 模块
在 Angular 应用中使用 i18n，你需要安装 @angular/localize 模块。可以通过以下命令安装：
-- --- -----------------
Step 2: 配置 Angular 应用的 i18n
在使用 Angular 的 i18n 前，你需要先根据你的语言需求进行配置，包括增加语言文件、配置主文件等。这里仅列出最基本的配置，其他配置详见 Angular i18n 官方文档。
增加语言文件
在 Angular 应用中，一个语言文件包括一个语言代码、一个本地化关键字，并以 .xlf 格式保存。
在 Angular 应用的根目录中，新建 i18n 目录，并在该目录中创建 zh-Hans.xlf 文件，其内容如下：
----- ------------- ------------------
------ ------------- ----------------------------------------------
----- ----------------------- -------------------- ------------------------
------
----------- -------------- ----------------
---------- --------------------
---------------------
-------------- -------------------
-------- ----------------------------------------------------
-------- -------------------------------------
----------------
-------------
-------
-------
--------在上述示例中，我们为中文简体（zh-Hans）新增了一个本地化关键字 APP_TITLE，其文本内容为 “我的应用”。
配置主文件
在 Angular 应用的 app.module.ts 文件中进行以下配置：
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - ----------------- ---------- - ---- -----------------------
------ - ---------------- - ---- ----------------------
------ - ---------------- --------------- - ---- ----------------------
------ - ------------------- - ---- -----------------------------
-----------
------------- ---------------
-------- -
--------------
-----------------
-- -- ---------------
-------------------------
------- -
-------- ----------------
----------- ------ ----------- -- -
------ --- ------------------------- ----------------- ---------
--
----- ------------
--
---------------- ---------- -- ----
--
--
---------- ---
---------- --------------
--
------ ----- --------- -
------------------- ---------- ----------------- -
-- ---------
--------------------------------
------------------------------------
----- ----------- - ---------------------------
--------------------------------------------- - ----------- - -----------
-
-在上述示例中，我们配置了 TranslateModule，通过该模块，Angular 应用可以从 ./assets/i18n/ 目录中加载本地化文件。
Step 3: 在代码中使用 i18n
在 Angular 应用中，你可以在模板中和标签中使用 i18n 变量。示例如下：
在 HTML 中：
--- -------------------
在 TypeScript 中：
------ - --------- - ---- ----------------
------ - ---------------- - ---- ----------------------
------------
--------- -----------
--------- --- ----------- - --------- ---
--
------ ----- ------------ -
----- - ---
------------------- ---------- ----------------- -
------------------------------------------ ------- -- -
---------- - ----
---
-
-在上述示例中，我们使用 {{ "APP_TITLE" | translate }} 显示 i18n 变量，在 TypeScript 中使用 translate.get('APP_TITLE') 获取本地化的文字。
示例代码
您可以在 GitHub 上访问示例代码。在该示例中，我们的任务是创建一个支持国际化的 Angular 应用，用户可以通过下拉菜单选择不同的语言。
在 app.module.ts 中，我们使用 TranslateModule 进行配置，并设置默认语言：
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - ----------------- ---------- - ---- -----------------------
------ - ---------------- - ---- ----------------------
------ - ---------------- --------------- - ---- ----------------------
------ - ------------------- - ---- -----------------------------
-----------
------------- ---------------
-------- -
--------------
-----------------
-- -- ---------------
-------------------------
------- -
-------- ----------------
----------- ------ ----------- -- -
------ --- ------------------------- ----------------- ---------
--
----- ------------
--
---------------- ----- -- ----
--
--
---------- ---
---------- --------------
--
------ ----- --------- -
------------------- ---------- ----------------- -
-- ---------
------------------------- ------------
-------------------------------
----- ----------- - ---------------------------
--------------------------------------------- - ----------- - ------
-
-在 app.component.ts 中，我们使用 ngx-bootstrap 创建了一个下拉菜单，使用 translate.use() 翻译文本，并在用户选择不同语言后切换语言：
------ - --------- - ---- ----------------
------ - ---------------- - ---- ----------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
----- - ---
------------------- ---------- ----------------- -
------------------------------------------ ------- -- -
---------- - ----
---
-
------------------------ -------- ---- -
-----------------------------
-
-在 app.component.html 中，我们创建了一个下拉菜单，用户可以通过该菜单切换语言：
------ ----- -------
---- -----------------
------- ---------- ------------- ---------------- ------------- ----------------------- ---------------------- -------------------- ----------------------
-- ------------- - --------- --
---------
---- --------------------- -------------------------------------
------- --------------------- -----------------------------------------------
------- --------------------- ---------------------------------------------------
------
------在 app.component.css 中，我们对下拉菜单进行了样式设置：
--------- - ------- ----- -------- ----- ----------------- -------- - -------------- - ---------- ----- ----------- -
结论
在 Angular 应用中使用 i18n，实现多语言支持非常简单。通过遵循本文所述的最佳实践，您可以在应用中轻松添加多语言支持，使之能够适应不同的语言和文化，让您的应用程序面向全球化市场，提高用户的用户体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670abcf3d91dce0dc884a030