在 Angular 应用中使用 i18n 的最佳实践

阅读时长 11 分钟读完

在今天的全球化语境下,一个应用程序必须面向多语言受众。而 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

纠错
反馈