Angular 国际化-开始

添加本地化包

ng add @angular/localize

设置源区域 ID

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

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

标记文本

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

1、在组件模板中

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

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

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

2、在组件代码中

// 一般文本
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 目录下：

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

翻译源文件

复制一份文件并重命名

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

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

<!-- 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>

配置翻译文件路径

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

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

秒客网