Angular 使用自定義ID管理標(biāo)記文本

管理帶有自定義 ID 的已標(biāo)記文本

Angular 提取器會(huì)生成一個(gè)文件，其中包含以下每個(gè)實(shí)例的翻譯單元條目。

• 組件模板中的每個(gè) ?i18n ?屬性
• 組件代碼中每個(gè) ?$localize? 標(biāo)記的消息字符串

Angular 會(huì)為每個(gè)翻譯單元分配一個(gè)唯一的 ID。

下面的范例會(huì)顯示一些帶有唯一 ID 的翻譯單元。

<trans-unit id="ba0cc104d3d69bf669f97b8d96a4c5d8d9559aa3" datatype="html">

當(dāng)你更改可翻譯文本時(shí)，提取器會(huì)為該翻譯單元生成一個(gè)新 ID。在大多數(shù)情況下，源文本中的更改還需要更改翻譯結(jié)果。因此，使用新 ID 可使文本更改與翻譯保持同步。

但是，某些翻譯系統(tǒng)需要 ID 的特定形式或語(yǔ)法。要滿足此要求，請(qǐng)使用自定義 ID 來(lái)標(biāo)記文本。大多數(shù)開(kāi)發(fā)人員不需要使用自定義 ID。如果你想使用獨(dú)特的語(yǔ)法來(lái)傳達(dá)額外的元數(shù)據(jù)，請(qǐng)使用自定義 ID。其他元數(shù)據(jù)可能包括出現(xiàn)文本的庫(kù)、組件或應(yīng)用程序中的區(qū)塊。

要在 ?i18n ?屬性或以 ?$localize? 標(biāo)記的消息字符串中指定自定義 ID，請(qǐng)使用 ?@@? 前綴。以下示例在標(biāo)題元素中定義了自定義 ID ?introductionHeader?。

<h1 i18n="@@introductionHeader">Hello i18n!</h1>

以下示例為變量定義了自定義 ID ?introductionHeader?。

variableText1 = $localize `:@@introductionHeader:Hello i18n!`;

當(dāng)你指定自定義 ID 時(shí)，提取器會(huì)生成一個(gè)帶有自定義 ID 的翻譯單元。

<trans-unit id="introductionHeader" datatype="html">

如果更改文本，提取器不會(huì)更改 ID。這導(dǎo)致你不得不用額外的步驟來(lái)更新其翻譯。使用自定義 ID 的缺點(diǎn)是，如果你更改文本，你的翻譯可能與新更改的源文本不同步。

使用帶有描述的自定義 ID

將自定義 ID 與描述(description)和含義(meaning)結(jié)合使用，以進(jìn)一步幫助翻譯人員。

以下示例包含“描述”，其后是自定義 ID。

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

以下示例定義了一個(gè)變量的自定義 ID ?introductionHeader ?及其描述。

variableText2 = $localize `:An introduction header for this sample@@introductionHeader:Hello i18n!`;

下面的例子又增加了“含義”。

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

以下示例為變量定義了自定義 ID ?introductionHeader?。

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

定義唯一的自定義 ID

請(qǐng)務(wù)必定義唯一的自定義 ID。如果你對(duì)兩個(gè)不同的文本元素使用相同的 ID，提取工具只會(huì)提取第一個(gè)，而 Angular 會(huì)使用其翻譯來(lái)代替兩個(gè)原始文本元素。

比如，在以下代碼片段中，為兩個(gè)不同的文本元素定義了相同的自定義 ID ?myId?。

<h3 i18n="@@myId">Hello</h3>
<!-- ... -->
<p i18n="@@myId">Good bye</p>

下面以法語(yǔ)顯示翻譯。

<trans-unit id="myId" datatype="html">
  <source>Hello</source>
  <target state="new">Bonjour</target>
</trans-unit>

這兩個(gè)元素現(xiàn)在使用相同的翻譯 ( Bonjour )，因?yàn)樗鼈兌际鞘褂孟嗤淖远x ID 定義的。

<h3>Bonjour</h3>
<!-- ... -->
<p>Bonjour</p>