Gestionar texto marcado con IDs personalizados

El extractor de Angular genera un archivo con una entrada de unidad de traducción en cada uno de los siguientes casos.

Cada atributo i18n en una plantilla de componente
Cada cadena de mensaje etiquetada $localize en el código del componente

Como se describe en Cómo los significados controlan la extracción y la fusión de texto, Angular asigna a cada unidad de traducción un ID único.

El siguiente ejemplo muestra unidades de traducción con IDs únicos.

messages.fr.xlf.html

<!-- The `messages.fr.xlf` after translation for documentation purposes --><?xml version="1.0" encoding="UTF-8" ?><xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">  <file source-language="en" datatype="plaintext" original="ng2.template">    <body>      <trans-unit id="introductionHeader" datatype="html">        <source>Hello i18n!</source>        <note priority="1" from="description">An introduction header for this sample</note>        <note priority="1" from="meaning">User welcome</note>      </trans-unit>      <trans-unit id="introductionHeader" datatype="html">        <source>Hello i18n!</source>        <target>Bonjour i18n !</target>        <note priority="1" from="description">An introduction header for this sample</note>        <note priority="1" from="meaning">User welcome</note>      </trans-unit>      <trans-unit id="ba0cc104d3d69bf669f97b8d96a4c5d8d9559aa3" datatype="html">        <source>I don't output any element</source>        <target>Je n'affiche aucun élément</target>      </trans-unit>      <trans-unit id="701174153757adf13e7c24a248c8a873ac9f5193" datatype="html">        <source>Angular logo</source>        <target>Logo d'Angular</target>      </trans-unit>      <trans-unit id="5a134dee893586d02bffc9611056b9cadf9abfad" datatype="html">        <source>{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {<x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes ago} }</source>        <target>{VAR_PLURAL, plural, =0 {à l'instant} =1 {il y a une minute} other {il y a <x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes} }</target>      </trans-unit>      <trans-unit id="f99f34ac9bd4606345071bd813858dec29f3b7d1" datatype="html">        <source>The author is <x id="ICU" equiv-text="{gender, select, male {...} female {...} other {...}}"/></source>        <target>L'auteur est <x id="ICU" equiv-text="{gender, select, male {...} female {...} other {...}}"/></target>      </trans-unit>      <trans-unit id="eff74b75ab7364b6fa888f1cbfae901aaaf02295" datatype="html">        <source>{VAR_SELECT, select, male {male} female {female} other {other} }</source>        <target>{VAR_SELECT, select, male {un homme} female {une femme} other {autre} }</target>      </trans-unit>      <trans-unit id="972cb0cf3e442f7b1c00d7dab168ac08d6bdf20c" datatype="html">        <source>Updated: <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/></source>        <target>Mis à jour: <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/></target>      </trans-unit>      <trans-unit id="7151c2e67748b726f0864fc443861d45df21d706" datatype="html">        <source>{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {<x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes ago by {VAR_SELECT, select, male {male} female {female} other {other} }} }</source>        <target>{VAR_PLURAL, plural, =0 {à l'instant} =1 {il y a une minute} other {il y a <x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes par {VAR_SELECT, select, male {un homme} female {une femme} other {autre} }} }</target>      </trans-unit>      <trans-unit id="myId" datatype="html">        <source>Hello</source>        <target state="new">Bonjour</target>      </trans-unit>    </body>  </file></xliff>

Cuando cambias el texto traducible, el extractor genera un nuevo ID para esa unidad de traducción. En la mayoría de los casos, los cambios en el texto fuente también requieren un cambio en la traducción. Por lo tanto, usar un nuevo ID mantiene el cambio de texto sincronizado con las traducciones.

Sin embargo, algunos sistemas de traducción requieren una forma o sintaxis específica para el ID. Para cumplir con este requisito, usa un ID personalizado para marcar texto. La mayoría de los desarrolladores no necesitan usar un ID personalizado. Si deseas usar una sintaxis única para transmitir metadatos adicionales, usa un ID personalizado. Los metadatos adicionales pueden incluir la biblioteca, el componente o el área de la aplicación en la que aparece el texto.

Para especificar un ID personalizado en el atributo i18n o en la cadena de mensaje etiquetada $localize, usa el prefijo @@. El siguiente ejemplo define el ID personalizado introductionHeader en un elemento de encabezado.

app/app.component.html

<h1>Hello i18n!</h1><h1 i18n>Hello i18n!</h1><h1 i18n="An introduction header for this sample">Hello i18n!</h1><h1 i18n="site header|An introduction header for this sample">Hello i18n!</h1><h1 i18n="An introduction header for this sample@@introductionHeader">Hello i18n!</h1><h1 i18n="site header|An introduction header for this sample@@introductionHeader">Hello i18n!</h1><h1 i18n="@@introductionHeader">Hello i18n!</h1><img [src]="logo" title="Angular logo" alt="Angular logo"><h3 i18n="@@myId">Hello</h3><!-- ... --><p i18n="@@myId">Good bye</p>

El siguiente ejemplo define el ID personalizado introductionHeader para una variable.

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

Cuando especificas un ID personalizado, el extractor genera una unidad de traducción con el ID personalizado.

messages.fr.xlf.html

<!-- The `messages.fr.xlf` after translation for documentation purposes --><?xml version="1.0" encoding="UTF-8" ?><xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">  <file source-language="en" datatype="plaintext" original="ng2.template">    <body>      <trans-unit id="introductionHeader" datatype="html">        <source>Hello i18n!</source>        <note priority="1" from="description">An introduction header for this sample</note>        <note priority="1" from="meaning">User welcome</note>      </trans-unit>      <trans-unit id="introductionHeader" datatype="html">        <source>Hello i18n!</source>        <target>Bonjour i18n !</target>        <note priority="1" from="description">An introduction header for this sample</note>        <note priority="1" from="meaning">User welcome</note>      </trans-unit>      <trans-unit id="ba0cc104d3d69bf669f97b8d96a4c5d8d9559aa3" datatype="html">        <source>I don't output any element</source>        <target>Je n'affiche aucun élément</target>      </trans-unit>      <trans-unit id="701174153757adf13e7c24a248c8a873ac9f5193" datatype="html">        <source>Angular logo</source>        <target>Logo d'Angular</target>      </trans-unit>      <trans-unit id="5a134dee893586d02bffc9611056b9cadf9abfad" datatype="html">        <source>{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {<x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes ago} }</source>        <target>{VAR_PLURAL, plural, =0 {à l'instant} =1 {il y a une minute} other {il y a <x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes} }</target>      </trans-unit>      <trans-unit id="f99f34ac9bd4606345071bd813858dec29f3b7d1" datatype="html">        <source>The author is <x id="ICU" equiv-text="{gender, select, male {...} female {...} other {...}}"/></source>        <target>L'auteur est <x id="ICU" equiv-text="{gender, select, male {...} female {...} other {...}}"/></target>      </trans-unit>      <trans-unit id="eff74b75ab7364b6fa888f1cbfae901aaaf02295" datatype="html">        <source>{VAR_SELECT, select, male {male} female {female} other {other} }</source>        <target>{VAR_SELECT, select, male {un homme} female {une femme} other {autre} }</target>      </trans-unit>      <trans-unit id="972cb0cf3e442f7b1c00d7dab168ac08d6bdf20c" datatype="html">        <source>Updated: <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/></source>        <target>Mis à jour: <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/></target>      </trans-unit>      <trans-unit id="7151c2e67748b726f0864fc443861d45df21d706" datatype="html">        <source>{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {<x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes ago by {VAR_SELECT, select, male {male} female {female} other {other} }} }</source>        <target>{VAR_PLURAL, plural, =0 {à l'instant} =1 {il y a une minute} other {il y a <x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes par {VAR_SELECT, select, male {un homme} female {une femme} other {autre} }} }</target>      </trans-unit>      <trans-unit id="myId" datatype="html">        <source>Hello</source>        <target state="new">Bonjour</target>      </trans-unit>    </body>  </file></xliff>

Si cambias el texto, el extractor no cambia el ID. Como resultado, no tienes que dar el paso adicional de actualizar la traducción. La desventaja de usar IDs personalizados es que si cambias el texto, tu traducción puede quedar desincronizada con el texto fuente recién cambiado.

Usar un ID personalizado con una descripción

Usa un ID personalizado en combinación con una descripción y un significado para ayudar aún más al traductor.

El siguiente ejemplo incluye una descripción, seguida del ID personalizado.

app/app.component.html

<h1>Hello i18n!</h1><h1 i18n>Hello i18n!</h1><h1 i18n="An introduction header for this sample">Hello i18n!</h1><h1 i18n="site header|An introduction header for this sample">Hello i18n!</h1><h1 i18n="An introduction header for this sample@@introductionHeader">Hello i18n!</h1><h1 i18n="site header|An introduction header for this sample@@introductionHeader">Hello i18n!</h1><h1 i18n="@@introductionHeader">Hello i18n!</h1><img [src]="logo" title="Angular logo" alt="Angular logo"><h3 i18n="@@myId">Hello</h3><!-- ... --><p i18n="@@myId">Good bye</p>

El siguiente ejemplo define el ID personalizado introductionHeader y una descripción para una variable.

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

El siguiente ejemplo agrega un significado.

app/app.component.html

<h1>Hello i18n!</h1><h1 i18n>Hello i18n!</h1><h1 i18n="An introduction header for this sample">Hello i18n!</h1><h1 i18n="site header|An introduction header for this sample">Hello i18n!</h1><h1 i18n="An introduction header for this sample@@introductionHeader">Hello i18n!</h1><h1 i18n="site header|An introduction header for this sample@@introductionHeader">Hello i18n!</h1><h1 i18n="@@introductionHeader">Hello i18n!</h1><img [src]="logo" title="Angular logo" alt="Angular logo"><h3 i18n="@@myId">Hello</h3><!-- ... --><p i18n="@@myId">Good bye</p>

El siguiente ejemplo define el ID personalizado introductionHeader para una variable.

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

Definir IDs personalizados únicos

Asegúrate de definir IDs personalizados que sean únicos. Si usas el mismo ID para dos elementos de texto diferentes, la herramienta de extracción extrae solo el primero y Angular usa la misma traducción en lugar de ambos elementos de texto originales.

Por ejemplo, en el siguiente fragmento de código se define el mismo ID personalizado myId para dos elementos de texto diferentes.

app/app.component.html

<h1>Hello i18n!</h1><h1 i18n>Hello i18n!</h1><h1 i18n="An introduction header for this sample">Hello i18n!</h1><h1 i18n="site header|An introduction header for this sample">Hello i18n!</h1><h1 i18n="An introduction header for this sample@@introductionHeader">Hello i18n!</h1><h1 i18n="site header|An introduction header for this sample@@introductionHeader">Hello i18n!</h1><h1 i18n="@@introductionHeader">Hello i18n!</h1><img [src]="logo" title="Angular logo" alt="Angular logo"><h3 i18n="@@myId">Hello</h3><!-- ... --><p i18n="@@myId">Good bye</p>

Lo siguiente muestra la traducción en francés.

src/locale/messages.fr.xlf

<!-- The `messages.fr.xlf` after translation for documentation purposes --><?xml version="1.0" encoding="UTF-8" ?><xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">  <file source-language="en" datatype="plaintext" original="ng2.template">    <body>      <trans-unit id="introductionHeader" datatype="html">        <source>Hello i18n!</source>        <note priority="1" from="description">An introduction header for this sample</note>        <note priority="1" from="meaning">User welcome</note>      </trans-unit>      <trans-unit id="introductionHeader" datatype="html">        <source>Hello i18n!</source>        <target>Bonjour i18n !</target>        <note priority="1" from="description">An introduction header for this sample</note>        <note priority="1" from="meaning">User welcome</note>      </trans-unit>      <trans-unit id="ba0cc104d3d69bf669f97b8d96a4c5d8d9559aa3" datatype="html">        <source>I don't output any element</source>        <target>Je n'affiche aucun élément</target>      </trans-unit>      <trans-unit id="701174153757adf13e7c24a248c8a873ac9f5193" datatype="html">        <source>Angular logo</source>        <target>Logo d'Angular</target>      </trans-unit>      <trans-unit id="5a134dee893586d02bffc9611056b9cadf9abfad" datatype="html">        <source>{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {<x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes ago} }</source>        <target>{VAR_PLURAL, plural, =0 {à l'instant} =1 {il y a une minute} other {il y a <x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes} }</target>      </trans-unit>      <trans-unit id="f99f34ac9bd4606345071bd813858dec29f3b7d1" datatype="html">        <source>The author is <x id="ICU" equiv-text="{gender, select, male {...} female {...} other {...}}"/></source>        <target>L'auteur est <x id="ICU" equiv-text="{gender, select, male {...} female {...} other {...}}"/></target>      </trans-unit>      <trans-unit id="eff74b75ab7364b6fa888f1cbfae901aaaf02295" datatype="html">        <source>{VAR_SELECT, select, male {male} female {female} other {other} }</source>        <target>{VAR_SELECT, select, male {un homme} female {une femme} other {autre} }</target>      </trans-unit>      <trans-unit id="972cb0cf3e442f7b1c00d7dab168ac08d6bdf20c" datatype="html">        <source>Updated: <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/></source>        <target>Mis à jour: <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/></target>      </trans-unit>      <trans-unit id="7151c2e67748b726f0864fc443861d45df21d706" datatype="html">        <source>{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {<x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes ago by {VAR_SELECT, select, male {male} female {female} other {other} }} }</source>        <target>{VAR_PLURAL, plural, =0 {à l'instant} =1 {il y a une minute} other {il y a <x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes par {VAR_SELECT, select, male {un homme} female {une femme} other {autre} }} }</target>      </trans-unit>      <trans-unit id="myId" datatype="html">        <source>Hello</source>        <target state="new">Bonjour</target>      </trans-unit>    </body>  </file></xliff>

Ambos elementos ahora usan la misma traducción (Bonjour), porque ambos fueron definidos con el mismo ID personalizado.

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