Angular Academy · Lección

Marcar texto para su traducción

Usar atributos de i18n para marcar texto traducible

Marcar texto para su traducción es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.

Qué resuelve la internacionalización

La internacionalización (i18n) consiste en preparar la aplicación para que su texto pueda traducirse a otros idiomas sin modificar el código. Angular incluye un sistema de i18n integrado basado en marcar el texto traducible de las plantillas con el atributo i18n.

El atributo i18n

Añada el atributo i18n a cualquier elemento cuyo texto deba traducirse. Angular recopila estos elementos durante la compilación y reemplaza el contenido según la configuración regional.

<h1 i18n>Welcome to our store</h1>
<p i18n>Choose a product to begin.</p>

Traducir atributos

Para traducir un atributo HTML (como title o placeholder), antepóngale i18n-.

<input placeholder="Search" i18n-placeholder />
<img src="logo.png" alt="Company logo" i18n-alt />

Significado y descripción

Puede proporcionar contexto a los traductores con la sintaxis i18n="meaning|description". El significado agrupa las frases idénticas que deben compartir una traducción; la descripción explica su uso.

<button i18n="cta|The main call to action on the home page">Get started</button>

Identificadores personalizados

Añada un identificador personalizado estable después de @@ para que la traducción sobreviva a las modificaciones del texto. Sin él, cambiar el texto de origen genera un identificador nuevo y se pierde la traducción existente.

<h1 i18n="@@homeTitle">Welcome to our store</h1>

Interpolaciones en texto traducido

Los bindings dentro del texto traducido se convierten en marcadores de posición. Los traductores ven un token con nombre que pueden recolocar para adaptarlo a su idioma.

<p i18n>Hello, {{ name }}! You have {{ count }} new messages.</p>

Marcar texto en componentes con $localize

Para las cadenas de TypeScript (no las plantillas), etiquételas con $localize. Esto marca la cadena para su extracción, igual que el atributo i18n en las plantillas.

const greeting = $localize('Welcome back'); // tagged-template form, marked for extraction

Por qué no basta con concatenar cadenas

Codificar y concatenar texto ('You have ' + n + ' items') perjudica la traducción: el orden de las palabras cambia según el idioma y las reglas de pluralización varían. Marcar frases completas con i18n conserva la gramática para los traductores.

Traducir marcado anidado

Cuando el texto traducible contiene elementos secundarios, Angular los conserva como marcadores de posición para que los traductores no puedan eliminar accidentalmente el marcado.

<p i18n>Read our <a href="/terms">terms of service</a> before continuing.</p>

Mantener limpio el texto de origen

Marque el texto en la unidad más pequeña que tenga sentido, normalmente una oración completa o una etiqueta. Evite dividir una oración entre varios bloques i18n, ya que cada fragmento se convierte en una cadena independiente y más difícil de traducir.

Qué ocurre durante la compilación

El propio atributo i18n no genera ningún coste en tiempo de ejecución: Angular reemplaza el texto marcado durante la compilación para cada configuración regional y genera un bundle optimizado independiente. En las próximas lecciones extraeremos y traduciremos esas cadenas.

Comprobación rápida

¿Cómo se traduce un atributo placeholder?

Resumen

Marque el texto de las plantillas con el atributo i18n y los atributos con i18n-attr. Añada meaning|description para proporcionar contexto y @@customId para obtener identificadores estables. Los bindings se convierten en marcadores de posición y las cadenas de TypeScript usan $localize. El marcado no genera ningún coste en tiempo de ejecución.

Preguntas frecuentes

¿La lección «Marcar texto para su traducción» es gratis?

Sí — el texto completo de «Marcar texto para su traducción» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Marcar texto para su traducción»?

Usar atributos de i18n para marcar texto traducible Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Angular Academy?

No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Marcar texto para su traducción»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Angular Academy?

Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Angular Academy