angular translate Angular 处理翻译文件

// 例子: 使用占位符和表达式加载不同版本的文本
$translateProvider.translations('en', {
    'HELLO': 'Hello {{name}}!' // 加上占位符name 
}); 
$translateProvider.translations('es', { 
    'HELLO': 'Hola {{name | uppercase}}!' // 加上表达式uppercase 
}); 

使用翻译文件

准备好要翻译的组件后，使用 Angular CLI 的 ​extract-i18n​ 命令将组件中的标记文本提取到源语言文件中。

已标记的文本包括标记为 ​i18n ​的文本、标记为 ​i18n-​属性的属性和标记为 ​$localize​ 的文本。

完成以下步骤为你的项目创建和更新翻译文件。

1. 提取源语言文件
2. （可选）更改位置、格式和名称
3. 复制源语言文件以便为每种语言创建一个翻译文件
4. 翻译每个翻译文件
5. 分别翻译复数和替代表达式
• 翻译复数
• 翻译替代表达式
• 翻译嵌套表达式

提取源语言文件

要提取源语言文件，请完成以下操作。

1. 打开终端窗口。
2. 切换到你的项目根目录。
3. 运行以下 CLI 命令。

ng extract-i18n

​extract-i18n​ 命令在项目的根目录中创建一个名为 ​messages.xlf​ 的源语言文件。有关 XML 本地化交换文件格式（XLIFF，版本 1.2）的更多信息，请参阅 XLIFF。

使用以下 ​extract-i18n​ 命令选项更改源语言文件位置、格式和文件名。

命令选项	详情
--format	设置输出文件的格式
--outFile	设置输出文件的名称
--output-path	设置输出目录的路径

更改源语言文件的位置

要在 ​src/locale​ 目录中创建文件，请将输出路径指定为选项。

extract-18n --output-path 示例

以下示例将输出路径指定给选项。

ng extract-i18n --output-path src/locale

更改源语言文件格式

​extract-i18n​ 命令会创建如下翻译格式的文件。

翻译格式	详情	文件扩展名
ARB	应用资源包	.arb
JSON	JavaScript 对象表示法	.json
XLIFF 1.2	XML 本地化交换文件格式，版本 1.2	.xlf
XLIFF 2	XML 本地化交换文件格式，版本 2	.xlf
XMB	XML 消息包	.xmb (.xtb)

使用 ​--format​ 命令选项明确指定转换格式。

XMB 格式生成 ​.xmb​ 扩展名的源语言文件，但生成 ​.xtb​ 扩展名的翻译文件。

extract-18n --format 示例

以下示例演示了几种翻译格式。

ng extract-i18n --format=xlf
ng extract-i18n --format=xlf2
ng extract-i18n --format=xmb
ng extract-i18n --format=json
ng extract-i18n --format=arb

更改源语言文件名

要更改提取工具生成的源语言文件的名称，请使用 ​--outFile​ 命令选项。

extract-18n --out-file 示例

以下示例演示命名输出文件。

ng extract-i18n --out-file source.xlf

为每种语言创建一个翻译文件

要为语言环境或语言创建翻译文件，请完成以下操作。

1. 提取源语言文件。
2. 复制源语言文件，为每种语言创建一个翻译文件。
3. 重命名翻译文件以添加语言环境标识。

messages.xlf --> message.{locale}.xlf

4. 在你的项目根目录创建一个名为 ​locale ​的新目录。

src/locale

5. 将翻译文件移到新目录。
6. 将翻译文件发送给你的翻译人员。
7. 对要添加到应用程序中的每种语言重复上述步骤。

法语的 extract-i18n 示例

比如，要创建法语翻译文件，请完成以下操作。

1. 运行 ​extract-18n​ 命令。
2. 复制 ​messages.xlf​ 源语言文件。
3. 将副本重命名为 ​messages.fr.xlf​ 以进行法语 ( ​fr​ ) 翻译。
4. 将 ​fr​ 翻译文件移动到 ​src/locale​ 目录。
5. 将 ​fr​ 翻译文件发送给翻译人员。

翻译每个翻译文件

除非你精通该语言并有时间编辑翻译，否则你可能会完成以下步骤。

1. 将每个翻译文件发送给翻译人员。
2. 翻译人员使用 XLIFF 文件编辑器完成以下操作。
• 创建翻译。
• 编辑翻译。

法语翻译流程示例

要演示该过程，请查看 Angular 国际化应用范例中的 ​messages.fr.xlf​ 文件。Angular 国际化应用范例中就包含法语翻译文件，你无需特殊的 XLIFF 编辑器或法语知识即可进行编辑。

以下操作描述了法语的翻译过程。

1. 打开 ​messages.fr.xlf​ 并找到第一个 ​<trans-unit>​ 元素。这是一个翻译单元，也称为文本节点，表示之前用 ​i18n ​属性标记的 ​<h1>​ 问候标签的翻译。

<trans-unit id="introductionHeader" datatype="html">
  <source>Hello i18n!</source>
  <note priority="1" from="description">An introduction header for this sample</note>
  <note priority="1" from="meaning">User welcome</note>
</trans-unit>

​id="introductionHeader"​ 是自定义 ID，但没有源 HTML 中所需的 ​@@​ 前缀。

2. 复制文本节点中的 ​<source>...</source>​ 元素，将其重命名为 ​target​，然后将内容替换为法语文本。

<trans-unit id="introductionHeader" datatype="html">
  <source>Hello i18n!</source>
  <target>Bonjour i18n !</target>
  <note priority="1" from="description">An introduction header for this sample</note>
  <note priority="1" from="meaning">User welcome</note>
</trans-unit>

在更复杂的翻译中，描述和含义元素中的信息和上下文可帮助你选择正确的词进行翻译。

3. 翻译其他文本节点。以下示例显示了翻译方式。

<trans-unit id="ba0cc104d3d69bf669f97b8d96a4c5d8d9559aa3" datatype="html">
  <source>I don&apos;t output any element</source>
  <target>Je n"affiche aucun élément</target>
</trans-unit>
<trans-unit id="701174153757adf13e7c24a248c8a873ac9f5193" datatype="html">
  <source>Angular logo</source>
  <target>Logo d"Angular</target>
</trans-unit>

不要更改这些翻译单元的 ID。每个 ​id ​属性由 Angular 生成，它取决于组件文本的内容和所指定的含义。如果你更改了文本或含义，则 ​id ​属性就会更改。

翻译复数

根据需要为每种语言添加或删除复数分支。

语言复数规则，参见 CLDR 复数规则。

minute plural 例子

要翻译 ​plural​，就要翻译 ICU 格式的匹配值。

• ​just now ​
• ​one minute ago ​
• ​<x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes ago​

以下示例显示了翻译方式。

<trans-unit id="5a134dee893586d02bffc9611056b9cadf9abfad" datatype="html">
  <source>{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {<x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes ago} }</source>
  <target>{VAR_PLURAL, plural, =0 {à l"instant} =1 {il y a une minute} other {il y a <x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes} }</target>
</trans-unit>

翻译替代表达式

Angular 还会提取备用的 ​select ​ICU 表达式作为单独的翻译单元。

gender select 示例

以下示例在组件模板中显示了一个 ​select ​ICU 表达式。

<span i18n>The author is {gender, select, male {male} female {female} other {other}}</span>

在这个例子中，Angular 将表达式提取到两个翻译单元中。第一个包含 ​select ​子句之外的文本，并为 ​select ​使用占位符（​<x id="ICU">​）：

<trans-unit id="f99f34ac9bd4606345071bd813858dec29f3b7d1" datatype="html">
  <source>The author is <x id="ICU" equiv-text="{gender, select, male {...} female {...} other {...}}"/></source>
  <target>L"auteur est <x id="ICU" equiv-text="{gender, select, male {...} female {...} other {...}}"/></target>
</trans-unit>

翻译文本时，如有必要，请移动占位符，但不要将其删除。如果删除占位符，将从翻译完的应用程序中删除此 ICU 表达式。

以下示例显示包含 ​select ​子句的第二个翻译单元。

<trans-unit id="eff74b75ab7364b6fa888f1cbfae901aaaf02295" datatype="html">
  <source>{VAR_SELECT, select, male {male} female {female} other {other} }</source>
  <target>{VAR_SELECT, select, male {un homme} female {une femme} other {autre} }</target>
</trans-unit>

以下示例显示了翻译完的两个翻译单元。

<trans-unit id="f99f34ac9bd4606345071bd813858dec29f3b7d1" datatype="html">
  <source>The author is <x id="ICU" equiv-text="{gender, select, male {...} female {...} other {...}}"/></source>
  <target>L"auteur est <x id="ICU" equiv-text="{gender, select, male {...} female {...} other {...}}"/></target>
</trans-unit>
<trans-unit id="eff74b75ab7364b6fa888f1cbfae901aaaf02295" datatype="html">
  <source>{VAR_SELECT, select, male {male} female {female} other {other} }</source>
  <target>{VAR_SELECT, select, male {un homme} female {une femme} other {autre} }</target>
</trans-unit>

翻译嵌套表达式

Angular 按照与替代表达式相同的方式处理嵌套表达式。Angular 会将表达式提取到两个翻译单元中。

嵌套 plural 示例

以下示例显示包含嵌套表达式之外的文本的第一个翻译单元。

<trans-unit id="972cb0cf3e442f7b1c00d7dab168ac08d6bdf20c" datatype="html">
  <source>Updated: <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/></source>
  <target>Mis à jour: <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/></target>
</trans-unit>

以下示例展示了包含完整嵌套表达式的第二个翻译单元。

<trans-unit id="7151c2e67748b726f0864fc443861d45df21d706" datatype="html">
  <source>{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {<x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes ago by {VAR_SELECT, select, male {male} female {female} other {other} }} }</source>
  <target>{VAR_PLURAL, plural, =0 {à l"instant} =1 {il y a une minute} other {il y a <x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes par {VAR_SELECT, select, male {un homme} female {une femme} other {autre} }} }</target>
</trans-unit>

以下示例会在翻译后显示两个翻译单元。

<trans-unit id="972cb0cf3e442f7b1c00d7dab168ac08d6bdf20c" datatype="html">
  <source>Updated: <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/></source>
  <target>Mis à jour: <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/></target>
</trans-unit>
<trans-unit id="7151c2e67748b726f0864fc443861d45df21d706" datatype="html">
  <source>{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {<x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes ago by {VAR_SELECT, select, male {male} female {female} other {other} }} }</source>
  <target>{VAR_PLURAL, plural, =0 {à l"instant} =1 {il y a une minute} other {il y a <x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes par {VAR_SELECT, select, male {un homme} female {une femme} other {autre} }} }</target>
</trans-unit>