El componente <t>

Incluye tu contenido en el componente <t> para traducirlo. El contenido original se muestra hasta que se cargue la traducción.

<t>This content will be translated</t>

El texto con encuadernaciones también funciona. El contenido se vuelve a traducir cada vez que cambia, por ejemplo, cuando name cambia:

<t>Hello {{ name() }}</t>

Para los valores que cambian con frecuencia, como los nombres y los recuentos, utiliza variables en su lugar para que el texto solo se traduzca una vez.

Todas las traducciones solicitadas al mismo tiempo se envían a la API en una sola solicitud y las traducciones se almacenan en caché. Puedes usar tantos componentes de <t> como quieras.

<mt-translate> funciona como selector alternativo y Translate es el mismo componente que T.

Entradas

<t lang="fr" formality="formal">How are you?</t>

Variables

Pase los valores que cambien, como un nombre o un recuento, en [v] y haga referencia a ellos como $name en el contenido:

<t [v]="{ name: user.name, count: unread() }">
  Hi $name, you have $count new messages
</t>

Magic Translate traduce el texto alrededor de los valores una vez, como Hi {0}, you have {1} new messages, y vuelve a poner los valores en tu aplicación. La traducción está en caché y funciona para todos los nombres y todos los recuentos, y los valores en sí mismos nunca se envían a Magic Translate. Cuando solo cambian los valores, no se hace ninguna solicitud nueva.

Los valores están numerados en el orden en que aparecen por primera vez. La traducción puede llevarlos a donde el idioma los necesite, por ejemplo, {1} neue Nachrichten für {0}.

El texto que rodea a los valores puede contener HTML y a los valores se les puede dar el formato pipes primero:

<t [v]="{ count: cart.items.length, total: cart.total | currency }">
  You have <b>$count items</b> in your cart, totalling <b>$total</b>.
</t>

Algunas reglas:

• Solo se sustituyen las teclas [v], por lo que el texto como $5 permanece como está. Si dos teclas comienzan de la misma manera, como count y counts, gana la más larga.
• El mismo nombre puede aparecer más de una vez.
• Los valores se insertan como texto, nunca como HTML. En su lugar, pon marcas en el texto que las rodea: Hi <b>$name</b>.
• Las variables se sustituyen solo en texto, no en atributos como href o title.
• En el modo desarrollo, una clave que no aparece en el texto registra una advertencia que detecta errores tipográficos.
• Con la representación del lado del servidor, un <t> con [v] aparece vacío en el servidor y aparece una vez que la aplicación se ejecuta en el navegador.

Las variables usan $name en lugar de {name} porque Angular lee un solo { en una plantilla como el principio de un mensaje ICU y la plantilla no se compila.

Limitaciones

1. No puedes poner los componentes Angular dentro del componente <t>. Los elementos HTML simples están bien (consulta el siguiente ejemplo). El marcado traducido pasa por el desinfectante HTML de Angular.
2. El contenido de un componente <t> no puede superar los 10 KB, es decir, unos 5000 caracteres.

<!-- this is OK, since <a> is a plain HTML element -->
<t>
  <a href="mailto:info@i42.ch">Please send us an email</a>
</t>

<!-- this does NOT work, since <app-button> is an Angular component -->
<t>
  <app-button>Click me</app-button>
</t>

Para traducir atributos y otras cadenas, usa el t pipe.