Angular 處理翻譯文件

使用翻譯文件

準備好要翻譯的組件后，使用 Angular CLI 的 ?extract-i18n? 命令將組件中的標記文本提取到源語言文件中。

已標記的文本包括標記為 ?i18n ?的文本、標記為 ?i18n-?屬性的屬性和標記為 ?$localize? 的文本。

完成以下步驟為你的項目創(chuàng)建和更新翻譯文件。

1. 提取源語言文件
2. （可選）更改位置、格式和名稱
3. 復制源語言文件以便為每種語言創(chuàng)建一個翻譯文件
4. 翻譯每個翻譯文件
5. 分別翻譯復數(shù)和替代表達式
• 翻譯復數(shù)
• 翻譯替代表達式
• 翻譯嵌套表達式

提取源語言文件

要提取源語言文件，請完成以下操作。

1. 打開終端窗口。
2. 切換到你的項目根目錄。
3. 運行以下 CLI 命令。

ng extract-i18n

?extract-i18n? 命令在項目的根目錄中創(chuàng)建一個名為 ?messages.xlf? 的源語言文件。有關 XML 本地化交換文件格式（XLIFF，版本 1.2）的更多信息，請參閱 XLIFF。

使用以下 ?extract-i18n? 命令選項更改源語言文件位置、格式和文件名。

更改源語言文件的位置

要在 ?src/locale? 目錄中創(chuàng)建文件，請將輸出路徑指定為選項。

extract-18n --output-path 示例

以下示例將輸出路徑指定給選項。

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

更改源語言文件格式

?extract-i18n? 命令會創(chuàng)建如下翻譯格式的文件。

使用 ?--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

為每種語言創(chuàng)建一個翻譯文件

要為語言環(huán)境或語言創(chuàng)建翻譯文件，請完成以下操作。

1. 提取源語言文件。
2. 復制源語言文件，為每種語言創(chuàng)建一個翻譯文件。
3. 重命名翻譯文件以添加語言環(huán)境標識。

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

4. 在你的項目根目錄創(chuàng)建一個名為 ?locale ?的新目錄。

src/locale

5. 將翻譯文件移到新目錄。
6. 將翻譯文件發(fā)送給你的翻譯人員。
7. 對要添加到應用程序中的每種語言重復上述步驟。

法語的 extract-i18n 示例

比如，要創(chuàng)建法語翻譯文件，請完成以下操作。

1. 運行 ?extract-18n? 命令。
2. 復制 ?messages.xlf? 源語言文件。
3. 將副本重命名為 ?messages.fr.xlf? 以進行法語 ( ?fr? ) 翻譯。
4. 將 ?fr? 翻譯文件移動到 ?src/locale? 目錄。
5. 將 ?fr? 翻譯文件發(fā)送給翻譯人員。

翻譯每個翻譯文件

除非你精通該語言并有時間編輯翻譯，否則你可能會完成以下步驟。

1. 將每個翻譯文件發(fā)送給翻譯人員。
2. 翻譯人員使用 XLIFF 文件編輯器完成以下操作。
• 創(chuàng)建翻譯。
• 編輯翻譯。

法語翻譯流程示例

要演示該過程，請查看 Angular 國際化應用范例中的 ?messages.fr.xlf? 文件。Angular 國際化應用范例中就包含法語翻譯文件，你無需特殊的 XLIFF 編輯器或法語知識即可進行編輯。

以下操作描述了法語的翻譯過程。

1. 打開 ?messages.fr.xlf? 并找到第一個 ?<trans-unit>? 元素。這是一個翻譯單元，也稱為文本節(jié)點，表示之前用 ?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. 復制文本節(jié)點中的 ?<source>...</source>? 元素，將其重命名為 ?target?，然后將內(nèi)容替換為法語文本。

<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. 翻譯其他文本節(jié)點。以下示例顯示了翻譯方式。

<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 生成，它取決于組件文本的內(nèi)容和所指定的含義。如果你更改了文本或含義，則 ?id ?屬性就會更改。

翻譯復數(shù)

根據(jù)需要為每種語言添加或刪除復數(shù)分支。

語言復數(shù)規(guī)則，參見 CLDR 復數(shù)規(guī)則。

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>