codecamp

Angular 处理翻译文件

使用翻译文件

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

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

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

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

提取源语言文件

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

  1. 打开终端窗口。
  2. 切换到你的项目根目录。
  3. 运行以下 CLI 命令。
    4. 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. 重命名翻译文件以添加语言环境标识。
    4. messages.xlf --> message.{locale}.xlf
  4. 在你的项目根目录创建一个名为 ​locale ​的新目录。
    5. 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>​ 问候标签的翻译。
    2. <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​，然后将内容替换为法语文本。
    3. <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. 翻译其他文本节点。以下示例显示了翻译方式。
    4. <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>


Angular 准备翻译模板
Angular 将翻译合并到应用中
温馨提示
下载编程狮App，免费阅读超1000+编程语言教程
取消
确定
目录

Angular 快速上手

Angular 示例

Angular 特性

Angular 组件

Angular 模板

Angular 指令

Angular 依赖注入

Angular 开发指南

Angular 路由与导航

Angular 表单

Angular 测试

Angular 国际化

Angular 动画

Angular Service Worker和PWA

Angular 最佳实践

Angular 工具

Angular 开发工作流

Angular 原理图

Angular 教程

Angular 教程：英雄之旅

Angular 库

Angular 特性预览

Angular 版本发布信息

Angular 从AngularJS升级

关闭

 MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }