Angular 提取器会生成一个文件,其中包含以下每个实例的翻译单元条目。
i18n
属性 $localize
标记的消息字符串 Angular 会为每个翻译单元分配一个唯一的 ID。
下面的范例会显示一些带有唯一 ID 的翻译单元。
<trans-unit id="ba0cc104d3d69bf669f97b8d96a4c5d8d9559aa3" datatype="html">
当你更改可翻译文本时,提取器会为该翻译单元生成一个新 ID。在大多数情况下,源文本中的更改还需要更改翻译结果。因此,使用新 ID 可使文本更改与翻译保持同步。
但是,某些翻译系统需要 ID 的特定形式或语法。要满足此要求,请使用自定义 ID 来标记文本。大多数开发人员不需要使用自定义 ID。如果你想使用独特的语法来传达额外的元数据,请使用自定义 ID。其他元数据可能包括出现文本的库、组件或应用程序中的区块。
要在 i18n
属性或以 $localize
标记的消息字符串中指定自定义 ID,请使用 @@
前缀。以下示例在标题元素中定义了自定义 ID introductionHeader
。
<h1 i18n="@@introductionHeader">Hello i18n!</h1>
以下示例为变量定义了自定义 ID introductionHeader
。
variableText1 = $localize `:@@introductionHeader:Hello i18n!`;
当你指定自定义 ID 时,提取器会生成一个带有自定义 ID 的翻译单元。
<trans-unit id="introductionHeader" datatype="html">
如果更改文本,提取器不会更改 ID。这导致你不得不用额外的步骤来更新其翻译。使用自定义 ID 的缺点是,如果你更改文本,你的翻译可能与新更改的源文本不同步。
将自定义 ID 与描述(description)和含义(meaning)结合使用,以进一步帮助翻译人员。
以下示例包含“描述”,其后是自定义 ID。
<h1 i18n="An introduction header for this sample@@introductionHeader">Hello i18n!</h1>
以下示例定义了一个变量的自定义 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。如果你对两个不同的文本元素使用相同的 ID,提取工具只会提取第一个,而 Angular 会使用其翻译来代替两个原始文本元素。
比如,在以下代码片段中,为两个不同的文本元素定义了相同的自定义 ID myId
。
<h3 i18n="@@myId">Hello</h3>
<!-- ... -->
<p i18n="@@myId">Good bye</p>
下面以法语显示翻译。
<trans-unit id="myId" datatype="html">
<source>Hello</source>
<target state="new">Bonjour</target>
</trans-unit>
这两个元素现在使用相同的翻译 ( Bonjour ),因为它们都是使用相同的自定义 ID 定义的。
<h3>Bonjour</h3>
<!-- ... -->
<p>Bonjour</p>