Angular13 Angular 处理翻译文件

2024-02-25 开发教程 Angular13 匿名 1℃

使用翻译文件

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

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

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

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

翻译复数
翻译替代表达式
翻译嵌套表达式

提取源语言文件

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

打开终端窗口。
切换到你的项目根目录。
运行以下 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

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

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

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

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

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

src/locale

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

法语的 extract-i18n 示例

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

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

翻译每个翻译文件

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

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

创建翻译。
编辑翻译。

法语翻译流程示例

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

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

打开 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 中所需的 @@ 前缀。

复制文本节点中的 <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>

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

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

<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 将翻译合并到应用中

"Angular13"的目录