使用翻譯文件

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

已標(biāo)記的文本包括標(biāo)記為 ?i18n ?的文本、標(biāo)記為 ?i18n-?屬性的屬性和標(biāo)記為 ?$localize? 的文本。

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

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

提取源語言文件

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

1. 打開終端窗口。
2. 切換到你的項(xiàng)目根目錄。
3. 運(yùn)行以下 CLI 命令。

ng extract-i18n

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

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

更改源語言文件的位置

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

extract-18n --output-path 示例

以下示例將輸出路徑指定給選項(xiàng)。

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

更改源語言文件格式

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

使用 ?--format? 命令選項(xiàng)明確指定轉(zhuǎn)換格式。

XMB 格式生成 ?.xmb? 擴(kuò)展名的源語言文件，但生成 ?.xtb? 擴(kuò)展名的翻譯文件。

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? 命令選項(xiàng)。

extract-18n --out-file 示例

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

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

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

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

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

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

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

src/locale

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

法語的 extract-i18n 示例

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

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

翻譯每個(gè)翻譯文件

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

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

法語翻譯流程示例

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

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

1. 打開 ?messages.fr.xlf? 并找到第一個(gè) ?<trans-unit>? 元素。這是一個(gè)翻譯單元，也稱為文本節(jié)點(diǎn)，表示之前用 ?i18n ?屬性標(biāo)記的 ?<h1>? 問候標(biāo)簽的翻譯。

<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. 復(fù)制文本節(jié)點(diǎn)中的 ?<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>

在更復(fù)雜的翻譯中，描述和含義元素中的信息和上下文可幫助你選擇正確的詞進(jìn)行翻譯。

3. 翻譯其他文本節(jié)點(diǎn)。以下示例顯示了翻譯方式。

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

翻譯復(fù)數(shù)

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

語言復(fù)數(shù)規(guī)則，參見 CLDR 復(fù)數(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>

翻譯替代表達(dá)式

Angular 還會(huì)提取備用的 ?select ?ICU 表達(dá)式作為單獨(dú)的翻譯單元。

gender select 示例

以下示例在組件模板中顯示了一個(gè) ?select ?ICU 表達(dá)式。

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

在這個(gè)例子中，Angular 將表達(dá)式提取到兩個(gè)翻譯單元中。第一個(gè)包含 ?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>

翻譯文本時(shí)，如有必要，請移動(dòng)占位符，但不要將其刪除。如果刪除占位符，將從翻譯完的應(yīng)用程序中刪除此 ICU 表達(dá)式。

以下示例顯示包含 ?select ?子句的第二個(gè)翻譯單元。

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

以下示例顯示了翻譯完的兩個(gè)翻譯單元。

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

翻譯嵌套表達(dá)式

Angular 按照與替代表達(dá)式相同的方式處理嵌套表達(dá)式。Angular 會(huì)將表達(dá)式提取到兩個(gè)翻譯單元中。

嵌套 plural 示例

以下示例顯示包含嵌套表達(dá)式之外的文本的第一個(gè)翻譯單元。

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

以下示例展示了包含完整嵌套表達(dá)式的第二個(gè)翻譯單元。

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

以下示例會(huì)在翻譯后顯示兩個(gè)翻譯單元。

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