Gérer le texte marqué avec des identifiants personnalisés

L'extracteur Angular génère un fichier avec une entrée d'unité de traduction pour chacune des occurrences suivantes.

• Chaque attribut i18n dans le template d'un composant
• Chaque chaîne de message balisée avec $localize dans le code d'un composant

Comme décrit dans Comment les significations contrôlent l'extraction et la fusion du texte, Angular attribue à chaque unité de traduction un identifiant unique.

L'exemple suivant montre des unités de traduction avec des identifiants uniques.

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

Lorsque vous modifiez le texte traduisible, l'extracteur génère un nouvel identifiant pour cette unité de traduction. Dans la plupart des cas, une modification du texte source exige aussi une modification de la traduction. Ainsi, l'utilisation d'un nouvel identifiant maintient la modification du texte synchronisée avec les traductions.

Cependant, certains systèmes de traduction exigent une forme ou une syntaxe spécifique pour l'identifiant. Pour répondre à cette exigence, utilisez un identifiant personnalisé pour marquer le texte. La plupart des développeurs n'ont pas besoin d'utiliser d'identifiant personnalisé. Si vous voulez utiliser une syntaxe unique pour transmettre des métadonnées supplémentaires, utilisez un identifiant personnalisé. Les métadonnées supplémentaires peuvent inclure la library, le composant ou la zone de l'application dans laquelle le texte apparaît.

Pour spécifier un identifiant personnalisé dans l'attribut i18n ou dans une chaîne de message balisée avec $localize, utilisez le préfixe @@. L'exemple suivant définit l'identifiant personnalisé introductionHeader dans un élément de titre.

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

L'exemple suivant définit l'identifiant personnalisé introductionHeader pour une variable.

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

Lorsque vous spécifiez un identifiant personnalisé, l'extracteur génère une unité de traduction avec cet identifiant personnalisé.

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

Si vous modifiez le texte, l'extracteur ne modifie pas l'identifiant. Vous n'avez donc pas à effectuer l'étape supplémentaire de mise à jour de la traduction. L'inconvénient des identifiants personnalisés est que, si vous modifiez le texte, votre traduction risque de ne plus être synchronisée avec le texte source nouvellement modifié.

Utiliser un identifiant personnalisé avec une description

Utilisez un identifiant personnalisé combiné à une description et à une signification pour aider davantage le traducteur.

L'exemple suivant inclut une description, suivie de l'identifiant personnalisé.

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

L'exemple suivant définit l'identifiant personnalisé introductionHeader et une description pour une variable.

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

L'exemple suivant ajoute une signification.

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

L'exemple suivant définit l'identifiant personnalisé introductionHeader pour une variable.

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

Définir des identifiants personnalisés uniques

Veillez à définir des identifiants personnalisés uniques. Si vous utilisez le même identifiant pour deux éléments de texte différents, l'outil d'extraction n'extrait que le premier, et Angular utilise la traduction à la place des deux éléments de texte d'origine.

Par exemple, dans l'extrait de code suivant, le même identifiant personnalisé myId est défini pour deux éléments de texte différents.

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

L'exemple suivant montre la traduction en français.

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

Les deux éléments utilisent désormais la même traduction (Bonjour), car tous deux ont été définis avec le même identifiant personnalisé.

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