Angular 国际化 - 技术栈

什么是国际化？

国际化，通常被称作 i18n，是指设计和开发软件产品，使其能够轻松地适应不同的语言、地区和文化的过程。

在项目中，本地化过程包含以下两个步骤：

提取出用于翻译的文本
将文本翻译成各个区域的语言

准备工作

运行 ng version，检查 Angular Cli 版本号，建议不要低于 16.0.0。
运行 ng new my-app，初始化项目，或者使用现有项目。

开始

添加本地化包

bash 复制代码

ng add @angular/localize

设置源区域 ID

关于区域设置 ID 请参阅 [Unicode 语言和区域设置标识符]

json 复制代码

// angular.json
{
  // 注意：my-app 是你自己的项目名
  "my-app": {
    "i18n": {
      "sourceLocale": "zh"
    }
  }
}

标记文本

angular 组件中有两处地方可标记文本：

1、在组件模板中

html 复制代码

<!-- 标记元素标签中的文本 -->
<h1 i18n>Hello i18n!</h1>

<!-- 标记无元素标签的文本 -->
<ng-container i18n>Hello i18n!</ng-container>

<!-- 标记元素属性中的文本 -->
<img i18n-title title="Angular logo" />

2、在组件代码中

ts 复制代码

// 一般文本
const name = $localize`Jony`;

// 含有变量
const text = $localize`Hello i18n! ${name}`;

提取源语言文件

运行命令 ng extract-i18n 创建一个源语言文件。

可以自定义位置、格式和文件名称：

命令选项	描述
`--format`	设置输出文件的格式（可选：xlf/xlf2/xmb/json/arb）
`--out-file`	设置输出文件的名称
`--output-path`	设置输出目录的路径

本文创建一个 messages.xlf 文件放在 src/locale 目录下：

bash 复制代码

ng extract-i18n --format xlf2 --out-file messages.xlf --output-path src/locale

翻译源文件

复制一份文件并重命名

bash 复制代码

# locale 为目标语言，例如：messages.en.xlf
messages.xlf --> messages.{locale}.xlf

将 source 标签中的内容翻译成相应地区的语言，并放置在新增的 target 标签中

html 复制代码

<!-- messages.en.xlf -->
<trans-unit id="1954851963553192813" datatype="html">
  <source>内容区</source>
  <target>Content</target>
  <context-group purpose="location">
    <context context-type="sourcefile">src/app/container/container.component.html</context>
    <context context-type="linenumber">7,8</context>
  </context-group>
</trans-unit>

配置翻译文件路径

json 复制代码

{
  "i18n": {
    "sourceLocale": "zh",
    "locales": {
      "en": {
        "translation": "src/locale/messages.en.xlf"
      }
    }
  }
}

到这一步为止就已经完成了！

测试

本地验证

在 angular.json 中添加如下配置：

json 复制代码

{
  "architect": {
    "build": {
      "configurations": {
        "en": {
          "localize": ["en"]
        }
      }
    },
    "serve": {
      "configurations": {
        "en": {
          "buildTarget": "my-app:build:en"
        }
      }
    }
  }
}

在 package.json 中添加运行命令

json 复制代码

{
  "scripts": {
    "start:en": "ng serve --configuration=en"
  }
}

最后运行 npm run start:en 就可以在本地验证当前语言是否正确了。

生产环境

配置了多语言之后，通过 npm run build 打包出来的 dist 结构如下：

复制代码

└─ dist
│  └─ my-app
│  │  ├─ zh
│  │  ├─ en
│  │  └─ fr

它给每一种语言都打包了一份文件，通过 nginx 配置每一种语言对应的文件路径，

例如 /zh --> /dist/my-app/zh/index.html，切换语言的时候只需要更改 url 上的路由即可。

conf 复制代码

server {
  listen 80;
  server_name localhost;
  root /www/data/my-app;

  location ~ ^/(zh|en|fr) {
    try_files $uri /$1/index.html?$args;
  }
}