Cómo pluralizar con $localize en Angular
En Angular, la pluralización es una característica clave de la internacionalización (i18n). Usando $localize, puedes manejar mensajes plurales dinámicamente de acuerdo al idioma y la cantidad. Esto se logra mediante reglas de pluralización incorporadas que se aplican automáticamente según el idioma configurado.
Configuración básica
1. Instalar y configurar $localize:
Asegúrate de que el paquete @angular/localize esté instalado:
ng add @angular/localize2. Definir mensajes plurales:
Utiliza la sintaxis especial de pluralización en $localize, basada en las opciones de ICU (International Components for Unicode).
Ejemplo básico de pluralización
La pluralización en $localize se define con el marcador plural. Aquí tienes un ejemplo:
const cantidad = 5;
const mensaje = $localize`:@@itemsMessage:Has comprado ${cantidad}:plural{
=0 {ningún artículo.}
=1 {un artículo.}
other {# artículos.}
}`;
console.log(mensaje);Explicación del código:
-
:@@itemsMessage:: Un identificador opcional único para facilitar la referencia en los archivos de traducción. -
plural: Define las reglas de pluralización. -
=0, =1, other: Casos específicos para manejar diferentes cantidades. -
#: Es reemplazado por el valor de la variable cantidad.
Salida esperada:
-
Si
cantidad = 0, muestra: "Has comprado ningún artículo." -
Si
cantidad = 1, muestra: "Has comprado un artículo." -
Si
cantidad > 1, muestra: "Has comprado cantidad] artículos."
Pluralización con variables adicionales
Puedes incluir más variables en el mensaje. Por ejemplo:
const cantidad = 3;
const producto = 'manzanas';
const mensaje = $localize`:@@fruitMessage:Has comprado ${cantidad} ${producto}:plural{
=0 {ninguna ${producto}.}
=1 {una ${producto}.}
other {# ${producto}.}
}`;
console.log(mensaje);Salida esperada:
-
Si
cantidad = 0, muestra: "Has comprado ninguna manzana." -
Si
cantidad = 1, muestra: "Has comprado una manzana." -
Si
cantidad > 1, muestra: "Has comprado cantidad] manzanas."
Traducción de mensajes plurales
Cuando usas $localize con pluralización, puedes extraer los mensajes para su traducción usando:
ng extract-i18n
En el archivo de traducción (messages.xlf), los mensajes plurales se representan con <plural>:
Ejemplo en messages.xlf
<trans-unit id="itemsMessage" datatype="html">
<source>Has comprado {VAR_PLURAL, plural, =0 {ningún artículo.} =1 {un artículo.} other {# artículos.}}</source>
<target>Vous avez acheté {VAR_PLURAL, plural, =0 {aucun article.} =1 {un article.} other {# articles.}}</target>
</trans-unit>
Beneficios de usar $localize para pluralización
1. Simplicidad: No requiere bibliotecas externas.
2. Optimización automática: Las reglas plurales se adaptan automáticamente al idioma configurado.
3. Extracción nativa: Los mensajes plurales se incluyen fácilmente en los archivos de traducción.
Referencias oficiales
Jorge García
Fullstack developer