Angular 準(zhǔn)備翻譯模板

準(zhǔn)備翻譯組件

要準(zhǔn)備翻譯項(xiàng)目，請(qǐng)完成以下操作。

• 使用 ?i18n? 屬性標(biāo)記組件模板中的文本
• 使用 ?i18n-? 屬性在組件模板中標(biāo)記屬性文本字符串
• 使用帶 ?$localize? 標(biāo)記的消息字符串標(biāo)記組件代碼中的文本字符串

在組件模板中標(biāo)記文本

在組件模板中，i18n 元數(shù)據(jù)就是 ?i18n ?屬性的值。

<element i18n="{i18n_metadata}">{string_to_translate}</element>

使用 ?i18n ?屬性在組件模板中標(biāo)記靜態(tài)文本消息以進(jìn)行翻譯。將它放在每個(gè)包含要翻譯的固定文本的元素標(biāo)簽上。

?i18n ?屬性是供 Angular 工具和編譯器識(shí)別的自定義屬性。

i18n 示例

下面的 ?<h1>? 標(biāo)簽顯示了一個(gè)簡(jiǎn)單的英語問候語：“Hello i18n！”。

<h1>Hello i18n!</h1>

要將問候語標(biāo)記為待翻譯，請(qǐng)將 ?i18n ?屬性添加到 ?<h1>? 標(biāo)記。

<h1 i18n>Hello i18n!</h1>

翻譯沒有 HTML 元素的內(nèi)聯(lián)文本

使用 ?<ng-container>? 元素來為特定文本關(guān)聯(lián)翻譯行為，而不會(huì)改變文本的顯示方式。

每個(gè) HTML 元素都會(huì)創(chuàng)建一個(gè)新的 DOM 元素。要想避免創(chuàng)建新的 DOM 元素，請(qǐng)將文本包裹在 ?<ng-container>? 元素中。以下示例顯示了如何將 ?<ng-container>? 元素轉(zhuǎn)換為不顯示的 HTML 注釋。

<ng-container i18n>I don't output any element</ng-container>

標(biāo)記翻譯的元素屬性

在組件模板中，i18n 的元數(shù)據(jù)是 ?i18n-{attribute_name}? 屬性的值。

<element i18n-{attribute_name}="{i18n_metadata}" {attribute_name}="{attribute_value}" />

HTML 元素的屬性包括那些要和組件模板中顯示的其它文本一起翻譯的文本。

將 ?i18n-{attribute_name}? 與任何元素的任何屬性一起使用，并將 ?{attribute_name}? 替換為該屬性的名稱。使用以下語法分配含義、描述和自定義 ID。

i18n-{attribute_name}="{meaning}|{description}@@{id}"

i18n-title 示例

要翻譯圖像的標(biāo)題，請(qǐng)查看此示例。以下示例顯示具有 ?title ?屬性的圖像。

<img [src]="logo" title="Angular logo" alt="Angular logo">

要標(biāo)記出待翻譯的標(biāo)題屬性，請(qǐng)完成以下操作。

1. 添加 ?i18n-title? 屬性

下面的示例展示了如何通過添加 ?i18n-title? 來標(biāo)記出 ?img ?標(biāo)簽上的 ?title ?屬性。

<img [src]="logo" i18n-title title="Angular logo" alt="Angular logo"/>

在組件代碼中標(biāo)記文本

在組件代碼中，翻譯源文本和元數(shù)據(jù)被反引號(hào) (?`?) 字符包圍。

使用 ?$localize? 標(biāo)記的消息字符串在代碼中標(biāo)記出要翻譯的字符串。

$localize `string_to_translate`;

i18n 元數(shù)據(jù)包裹在冒號(hào) (?:?) 字符中，并放在翻譯源文本之前。

$localize `:{i18n_metadata}:string_to_translate`

包含插值文本

在 ?$localize? 標(biāo)記的消息字符串中包含插值文本。

$localize `string_to_translate ${variable_name}`;

命名插值占位符

$localize `string_to_translate ${variable_name}:placeholder_name:`;

用于翻譯的 i18n 元數(shù)據(jù)

{meaning}|{description}@@{custom_id}

以下參數(shù)提供上下文和附加信息，以避免翻譯人員弄混。

添加有用的描述和含義

要準(zhǔn)確翻譯文本消息，就要為翻譯人員提供額外信息或上下文。

為 ?i18n ?屬性的值或 ?$localize? 標(biāo)記的消息字符串添加文本消息的描述。

以下示例顯示了 ?i18n ?屬性的值。

<h1 i18n="An introduction header for this sample">Hello i18n!</h1>

以下示例顯示了帶有描述的 ?$localize? 標(biāo)記消息字符串的值。

$localize `:An introduction header for this sample:Hello i18n!`;

翻譯者可能還需要了解該特定應(yīng)用上下文中此文本消息的含義或意圖，以便以與具有相同含義的其他文本相同的方式對(duì)其進(jìn)行翻譯。把含義放在 ?i18n ?屬性值的最前面，并用 ?|? 字符將其與描述分開：?{meaning}|{description}?。

h1 示例

比如，你可能希望將 ?<h1>? 標(biāo)記指定為需要以相同方式翻譯的站點(diǎn)標(biāo)題，無論是把它用作標(biāo)題還是在其他文本部分中引用。

以下示例顯示如何指定 ?<h1>? 標(biāo)記無論在標(biāo)題還是在別處引用都要以相同方式翻譯。

<h1 i18n="site header|An introduction header for this sample">Hello i18n!</h1>

其結(jié)果是：任何標(biāo)有 ?site header? 的文本都會(huì)以相同方式翻譯，因?yàn)槠?b>含義完全相同。

以下代碼示例顯示了帶有含義和描述的 ?$localize? 標(biāo)記消息字符串的值。

$localize `:site header|An introduction header for this sample:Hello i18n!`;

Angular 提取工具會(huì)為模板中的每個(gè) ?i18n ?屬性生成一個(gè)翻譯單元條目。Angular 提取工具會(huì)根據(jù)含義和描述為每個(gè)翻譯單元分配一個(gè)唯一的 ID。
具有不同含義的相同文本元素以不同的 ID 提取。比如，如果單詞“right”在兩個(gè)不同的位置使用以下兩個(gè)定義，則該單詞將被以不同地方式翻譯并作為不同的翻譯條目合并回應(yīng)用程序。

• ?correct ?如 "you are right"
• ?direction ?如 "turn right"

如果相同的文本元素滿足以下條件，則只會(huì)提取一次文本元素并使用相同的 ID。

• 相同的含義或定義
• 不同的描述

只要出現(xiàn)相同的文本元素，該翻譯條目就會(huì)合并回應(yīng)用程序。

ICU 表達(dá)式

ICU 表達(dá)式可幫助你在組件模板中標(biāo)記出某些條件下的替代文本。ICU 表達(dá)式包括一個(gè)組件屬性、一個(gè) ICU 子句以及由左花括號(hào) ( ?{? ) 和右花括號(hào) ( ?}? ) 字符包圍的 case 語句。

{ component_property, icu_clause, case_statements }

組件屬性定義了變量，而 ICU 子句定義了條件文本的類型。

為了簡(jiǎn)化翻譯，請(qǐng)使用帶有正則表達(dá)式的 Unicode 子句（ICU 子句）的國際化組件。

ICU 子句遵循 CLDR 復(fù)數(shù)規(guī)則 中指定的 ICU 消息格式。

標(biāo)記復(fù)數(shù)

不同的語言有不同的復(fù)數(shù)規(guī)則，這增加了翻譯的難度。因?yàn)槠渌Z言環(huán)境表達(dá)基數(shù)的方式不同，你可能需要設(shè)置與英語不一致的復(fù)數(shù)類別。使用 ?plural ?從句來標(biāo)記當(dāng)逐字翻譯時(shí)可能沒有意義的表達(dá)式。

{ component_property, plural, pluralization_categories }

在復(fù)數(shù)類別之后，輸入由左大括號(hào) (?{?) 和右大括號(hào) (?}?) 字符包圍的默認(rèn)文本（英文）。

pluralization_category { }

以下復(fù)數(shù)類別適用于英語，可能會(huì)根據(jù)語言環(huán)境而變化。

如果不能匹配任何復(fù)數(shù)類別，Angular 就會(huì)使用 ?other ?來匹配缺失類別的標(biāo)準(zhǔn)后備值。

other { default_quantity }

有關(guān)復(fù)數(shù)類別的更多信息，請(qǐng)參閱 CLDR - Unicode Common Locale Data Repository 中的選擇復(fù)數(shù)類別名稱。

許多語言環(huán)境不支持某些復(fù)數(shù)類別。默認(rèn)語言環(huán)境 (?en-US?) 使用一個(gè)非常簡(jiǎn)單的 ?plural()? 函數(shù)，該函數(shù)不支持 ?few ?復(fù)數(shù)類別。另一個(gè)具有簡(jiǎn)單 ?plural()? 函數(shù)的語言環(huán)境是 ?es?。以下代碼示例顯示了 en-US 多重plural()函數(shù)。

function plural(n: number): number {
  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
  if (i === 1 && v === 0) return 1;
  return 5;
}

?plural()? 函數(shù)只返回 1 ( ?one ?) 或 5 ( ?other ?)。而 ?few ?類別永遠(yuǎn)不會(huì)匹配到。

minutes 示例

如果你想用英文顯示以下短語，其中 ?x? 是一個(gè)數(shù)字。

updated x minutes ago

如果你還想根據(jù) ?x ?的基數(shù)顯示以下短語。

updated just now

updated one minute ago

使用 HTML 標(biāo)記和插值。下面的代碼示例展示了如何在 ?<span>? 元素中使用 ?plural ?子句來表達(dá)前三種情況。

<span i18n>Updated {minutes, plural, =0 {just now} =1 {one minute ago} other {{{minutes}} minutes ago}}</span>

查看前面代碼示例中的以下詳細(xì)信息。

?{{minutes}}? 是一個(gè)插值。

標(biāo)記替代和嵌套表達(dá)式

?select ?子句根據(jù)你定義的字符串值標(biāo)記替代文本的選擇。

{ component_property, select, selection_categories }

翻譯所有替代項(xiàng)以根據(jù)變量的值顯示替代文本。

在選擇類別后，輸入由左大括號(hào) ( ?{? ) 和右大括號(hào) ( ?}? ) 字符包圍的文本（英文）。

selection_category { text }

不同的語言環(huán)境具有不同的語法結(jié)構(gòu)，這增加了翻譯的難度。使用 HTML 標(biāo)記。如果無法匹配任何選擇類別，Angular 就會(huì)使用 ?other ?來匹配缺失類別的標(biāo)準(zhǔn)后備值。

other { default_value }

gender 例子

如果你想用英文顯示下面的短語。

The author is other

如果你還想根據(jù)組件的 ?gender ?屬性顯示以下短語。

The author is female

The author is male

下面的代碼示例展示了如何綁定組件的 ?gender ?屬性，并使用 ?select ?子句在 ?<span>? 元素中表達(dá)前三種情況。

?gender ?屬性將輸出綁定到以下每個(gè)字符串值。

?select ?子句會(huì)將值映射成適當(dāng)?shù)姆g。以下代碼示例顯示了與 select 子句一起使用的 ?gender ?屬性。

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

gender 和 minutes 示例

將不同的子句組合在一起，比如 ?plural ?和 ?select ?子句。以下代碼示例顯示了基于 ?gender ?和 ?minutes ?示例的嵌套子句。

<span i18n>Updated: {minutes, plural,
  =0 {just now}
  =1 {one minute ago}
  other {{{minutes}} minutes ago by {gender, select, male {male} female {female} other {other}}}}
</span>