Angular Academy · Leçon

Marquer le texte à traduire

Utilisez les attributs i18n pour marquer le texte traduisible

Marquer le texte à traduire est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.

Ce que résout l’internationalisation

L’internationalisation (i18n) consiste à préparer votre application afin que son texte puisse être traduit dans d’autres langues sans modifier le code. Angular intègre un système i18n fondé sur le marquage du texte traduisible dans les modèles avec l’attribut i18n.

L’attribut i18n

Ajoutez l’attribut i18n à tout élément dont le texte doit être traduit. Angular les collecte lors de la compilation et remplace le contenu selon la langue.

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

Traduire les attributs

Pour traduire un attribut HTML (comme title ou placeholder), faites-le précéder de i18n-.

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

Sens et description

Vous pouvez fournir un contexte aux traducteurs avec la syntaxe i18n="meaning|description". Le sens regroupe les expressions identiques qui doivent partager une traduction ; la description explique leur utilisation.

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

Identifiants personnalisés

Ajoutez un identifiant personnalisé stable après @@ afin qu’une traduction survive aux modifications du texte. Sans cet identifiant, la modification du texte source génère un nouvel identifiant et fait perdre la traduction existante.

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

Interpolations dans le texte traduit

Les liaisons présentes dans le texte traduit deviennent des espaces réservés. Les traducteurs voient un jeton nommé qu’ils peuvent repositionner selon leur langue.

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

Marquer le texte des composants avec $localize

Pour les chaînes de caractères dans TypeScript (et non dans les modèles), annotez-les avec $localize. Cela marque la chaîne pour l’extraction, comme le fait l’attribut i18n pour les modèles.

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

Pourquoi ne pas simplement concaténer les chaînes

Le texte écrit en dur et concaténé ('You have ' + n + ' items') complique la traduction : l’ordre des mots varie selon la langue et les règles du pluriel diffèrent. Le marquage des expressions complètes avec i18n préserve la grammaire pour les traducteurs.

Traduire le balisage imbriqué

Lorsque le texte traduisible contient des éléments enfants, Angular les conserve sous forme d’espaces réservés afin que les traducteurs ne puissent pas supprimer accidentellement le balisage.

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

Garder le texte source propre

Marquez le texte au niveau de l’unité la plus petite qui reste pertinente, généralement une phrase complète ou un libellé. Évitez de diviser une phrase entre plusieurs blocs i18n, car chaque fragment devient une chaîne distincte, plus difficile à traduire.

Ce qui se passe lors de la compilation

L’attribut i18n lui-même n’entraîne aucun coût à l’exécution : Angular remplace le texte marqué lors de la compilation pour chaque langue et génère un paquet optimisé distinct. Nous extrairons et traduirons ces chaînes dans les prochaines leçons.

Vérification rapide

Comment traduire un attribut d’espace réservé ?

Récapitulatif

Marquez le texte des modèles avec l’attribut i18n et les attributs avec i18n-attr. Ajoutez meaning|description pour fournir un contexte et @@customId pour obtenir des identifiants stables. Les liaisons deviennent des espaces réservés et les chaînes TypeScript utilisent $localize. Le marquage n’entraîne aucun coût à l’exécution.

Questions Fréquemment Posées

La leçon « Marquer le texte à traduire » est-elle gratuite ?

Oui — le texte complet de « Marquer le texte à traduire » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Marquer le texte à traduire » ?

Utilisez les attributs i18n pour marquer le texte traduisible Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Angular Academy ?

Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Marquer le texte à traduire » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?

Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Angular Academy