準備翻譯組件

要準備翻譯項目，請完成以下操作。

網(wǎng)站建設哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、重慶小程序開發(fā)公司、集團企業(yè)網(wǎng)站建設等服務項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了泉山免費建站歡迎大家使用！

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

在組件模板中標記文本

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

{string_to_translate}

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

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

i18n 示例

下面的 ?

? 標簽顯示了一個簡單的英語問候語：“Hello i18n！”。

Hello i18n!

要將問候語標記為待翻譯，請將 ?i18n ?屬性添加到 ?

? 標記。

Hello i18n!

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

使用 ?? 元素來為特定文本關聯(lián)翻譯行為，而不會改變文本的顯示方式。

每個 HTML 元素都會創(chuàng)建一個新的 DOM 元素。要想避免創(chuàng)建新的 DOM 元素，請將文本包裹在 ?? 元素中。以下示例顯示了如何將 ?? 元素轉換為不顯示的 HTML 注釋。

I don't output any element

標記翻譯的元素屬性

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

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

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

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

i18n-title 示例

要翻譯圖像的標題，請查看此示例。以下示例顯示具有 ?title ?屬性的圖像。

要標記出待翻譯的標題屬性，請完成以下操作。

1. 添加 ?i18n-title? 屬性

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

在組件代碼中標記文本

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

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

$localize `string_to_translate`;

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

$localize `:{i18n_metadata}:string_to_translate`

包含插值文本

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

$localize `string_to_translate ${variable_name}`;

命名插值占位符

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

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

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

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

自定義 ID

提供自定義標識符

說明

提供額外的信息或背景

含義(Meaning)

提供文本在特定上下文中的含義或意圖

元數(shù)據(jù)參數(shù)	詳情

添加有用的描述和含義

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

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

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

Hello i18n!

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

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

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

h1 示例

比如，你可能希望將 ?

? 標記指定為需要以相同方式翻譯的站點標題，無論是把它用作標題還是在其他文本部分中引用。

以下示例顯示如何指定 ?

? 標記無論在標題還是在別處引用都要以相同方式翻譯。

Hello i18n!

其結果是：任何標有 ?site header? 的文本都會以相同方式翻譯，因為其含義完全相同。

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

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

Angular 提取工具會為模板中的每個 ?
i18n ?屬性生成一個翻譯單元條目。Angular 提取工具會根據(jù)含義和描述為每個翻譯單元分配一個唯一的 ID。

具有不同
含義的相同文本元素以不同的 ID 提取。比如，如果單詞“right”在兩個不同的位置使用以下兩個定義，則該單詞將被以不同地方式翻譯并作為不同的翻譯條目合并回應用程序。

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

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

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

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

ICU 表達式

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

{ component_property, icu_clause, case_statements }

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

標記復數(shù)的使用

根據(jù)你定義的字符串值標記出替代文本的一些選擇

ICU 子句	詳情
?plural?
?select?

為了簡化翻譯，請使用帶有正則表達式的 Unicode 子句（ICU 子句）的國際化組件。

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

標記復數(shù)

不同的語言有不同的復數(shù)規(guī)則，這增加了翻譯的難度。因為其他語言環(huán)境表達基數(shù)的方式不同，你可能需要設置與英語不一致的復數(shù)類別。使用 ?plural ?從句來標記當逐字翻譯時可能沒有意義的表達式。

{ component_property, plural, pluralization_categories }

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

pluralization_category { }

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

數(shù)量為零

數(shù)量為 1

數(shù)量為 2

數(shù)量為 2 或更多

數(shù)量很大

數(shù)量的默認值

復數(shù)類	詳情	范例
zero
=0 { } zero { }
one
=1 { } one { }
two
=2 { } two { }
few
few { }
many
many { }
other
other { }

如果不能匹配任何復數(shù)類別，Angular 就會使用 ?other ?來匹配缺失類別的標準后備值。

other { default_quantity }

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

許多語言環(huán)境不支持某些復數(shù)類別。默認語言環(huán)境 (?en-US?) 使用一個非常簡單的 ?plural()? 函數(shù)，該函數(shù)不支持 ?few ?復數(shù)類別。另一個具有簡單 ?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 ?類別永遠不會匹配到。

minutes 示例

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

updated x minutes ago

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

updated just now

updated one minute ago

使用 HTML 標記和插值。下面的代碼示例展示了如何在 ?? 元素中使用 ?plural ?子句來表達前三種情況。

Updated {minutes, plural, =0 {just now} =1 {one minute ago} other {{{minutes}} minutes ago}}

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

第一個參數(shù)指定這個組件屬性是 minutes 并確定其分鐘數(shù)。

第二個參數(shù)指定 ICU 子句是 plural。

對于零分鐘，復數(shù)類別是 =0。其值是 just now。

對于一分鐘，復數(shù)類別是 =1。該值為 one minute。

對于任何不匹配的基數(shù)，默認的復數(shù)類別是 other。該值為 {{minutes}} minutes ago。

參數(shù)	詳情
minutes
plural
=0 {just now}
=1 {one minute}
other {{{minutes}} minutes ago}

?{{minutes}}? 是一個插值。

標記替代和嵌套表達式

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

{ component_property, select, selection_categories }

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

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

selection_category { text }

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

other { default_value }

gender 例子

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

The author is other

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

The author is female

The author is male

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

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

女性

男性

其它

值	英語值
female
male
other

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

The author is {gender, select, male {male} female {female} other {other}}

gender 和 minutes 示例

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

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

網(wǎng)頁標題：創(chuàng)新互聯(lián)Angular教程：Angular 準備翻譯模板
網(wǎng)站網(wǎng)址：http://www.dlmjj.cn/article/cdeijoe.html