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
  5. 在你的项目根目录创建一个名为 ​locale ​的新目录。
  6. src/locale
  7. 翻译文件移到新目录。
  8. 翻译文件发送给你的翻译人员。
  9. 对要添加到应用程序中的每种语言重复上述步骤。

法语的 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 中所需的 ​@@​ 前缀。

  3. 复制文本节点中的 ​<source>...</source>​ 元素,将其重命名为 ​target​,然后将内容替换为法语文本。
  4. <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>

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

  5. 翻译其他文本节点。以下示例显示了翻译方式。
  6. <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 特性预览

关闭

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; }