Cómo declarar traducciones con localize en Angular en el código TypeScript
En Angular, el paquete @angular/localize permite manejar la internacionalización (i18n) directamente en el código TypeScript mediante el marcador $localize. Este enfoque es útil para aplicaciones que requieren traducciones tanto en las plantillas como en el código.
Introducción a $localize
El marcador $localize de Angular es una herramienta para la internacionalización que te permite definir y utilizar mensajes traducibles en tiempo de compilación o ejecución. Se integra directamente con las herramientas de i18n nativas de Angular.
Configuración básica
1. Instalar @angular/localize:
Si tu proyecto no lo incluye, instálalo con el siguiente comando:
npm install @angular/localize --save2. Habilitar $localize:
Angular agrega automáticamente soporte para $localize en aplicaciones configuradas para i18n. Asegúrate de que tu aplicación esté configurada para internacionalización con comandos como:
ng add @angular/localize3. Configurar mensajes traducibles:
Los mensajes definidos con $localize en TypeScript serán extraídos y gestionados mediante archivos de traducción (xlf o xlf2).
Declarar traducciones con $localize
El marcador $localize permite definir mensajes traducibles en el código. Aquí tienes ejemplos básicos:
Mensaje básico
const mensaje = $localize`Hola, mundo!`;
console.log(mensaje); // Mostrará "Hola, mundo!" en el idioma predeterminado.Mensaje con variables
Puedes incluir variables dentro del mensaje para mayor dinamismo. Usa plantillas literales con ${}:
const nombre = 'Juan';
const mensaje = $localize`Hola, ${nombre}! ¿Cómo estás?`;
console.log(mensaje);Mensajes con descripciones y significados
Para facilitar la traducción, puedes agregar descripciones y significados en las traducciones:
const mensaje = $localize`:significado|descripción:Hola, mundo!`;
console.log(mensaje);- Significado: Identifica el propósito del mensaje.
- Descripción: Proporciona contexto adicional para los traductores.
Ejemplo completo:
const mensaje = $localize`:greeting|Saludo mostrado en la página principal:Hola, mundo!`;Exportar las traducciones
Para gestionar traducciones con $localize, necesitas exportar los mensajes a un archivo de localización utilizando el siguiente comando:
ng extract-i18n
Esto genera un archivo messages.xlf en la raíz del proyecto. Allí puedes definir las traducciones para diferentes idiomas.
Archivo de traducción (ejemplo messages.es.xlf)
<trans-unit id="greeting" datatype="html">
<source>Hola, mundo!</source>
<target>¡Hola, mundo!</target>
</trans-unit>Usos prácticos
Mensajes de error
const error = $localize`:error|Mensaje de error genérico:Ocurrió un error inesperado.`;
console.error(error);Confirmación dinámica
const usuario = 'María';
const confirmacion = $localize`:confirmation|Confirmación para el usuario:¿Estás seguro de que quieres continuar, ${usuario}?`;
alert(confirmacion);
Ventajas de $localize
- Integración nativa con Angular sin bibliotecas adicionales.
- Compatible con traducciones estáticas y dinámicas.
- Permite aprovechar la compilación de Angular para optimizar mensajes traducidos.
Referencias oficiales
Jorge García
Fullstack developer