Angular 使用自定义ID管理标记文本

2022-07-11 09:29 更新

管理带有自定义 ID 的已标记文本

Angular 提取器会生成一个文件，其中包含以下每个实例的翻译单元条目。

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>

以上内容是否对您有帮助：