Angular Academy · Lezione

Contrassegnare il testo da tradurre

Usare gli attributi i18n per contrassegnare il testo traducibile

Contrassegnare il testo da tradurre è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

A cosa serve l'internazionalizzazione

La Internationalization (i18n) consiste nel preparare l'app affinché il testo possa essere tradotto in altre lingue senza modificare il codice. Angular dispone di un sistema i18n integrato, basato sull'annotazione del testo traducibile nei template tramite l'attributo i18n.

L'attributo i18n

Aggiunga l'attributo i18n a ogni elemento il cui testo deve essere tradotto. Angular raccoglie questi elementi durante la build e sostituisce il contenuto in base alla lingua.

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

Traduzione degli attributi

Per tradurre un attributo HTML, come title o placeholder, lo preceda con i18n-.

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

Significato e descrizione

Può fornire ai traduttori il contesto usando la sintassi i18n="meaning|description". Il significato raggruppa le frasi identiche che devono condividere la stessa traduzione; la descrizione ne spiega l'utilizzo.

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

ID personalizzati

Aggiunga un ID personalizzato stabile dopo @@, così la traduzione rimane valida anche dopo le modifiche al testo. Senza questo ID, la modifica del testo sorgente genera un nuovo ID e fa perdere la traduzione esistente.

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

Interpolazioni nel testo tradotto

I binding all'interno del testo tradotto diventano segnaposto. I traduttori visualizzano un token denominato che possono riposizionare in base alle esigenze della lingua.

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

Annotazione del testo nei componenti con $localize

Per le stringhe in TypeScript, non nei template, le contrassegni con $localize. In questo modo la stringa viene contrassegnata per l'estrazione, proprio come fa l'attributo i18n con i template.

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

Perché non concatenare semplicemente le stringhe

La concatenazione e il testo hardcoded ('You have ' + n + ' items') compromettono la traduzione: l'ordine delle parole varia in base alla lingua e cambiano anche le regole del plurale. Contrassegnare frasi complete con i18n permette ai traduttori di mantenere intatta la grammatica.

Traduzione del markup annidato

Quando il testo traducibile contiene elementi figli, Angular li conserva come segnaposto, impedendo ai traduttori di rimuovere accidentalmente il markup.

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

Mantenimento del testo sorgente ordinato

Contrassegni il testo nell'unità più piccola sensata, di solito una frase completa o un'etichetta. Eviti di dividere una frase tra più blocchi i18n, perché ogni frammento diventa una stringa separata e più difficile da tradurre.

Cosa accade durante la build

L'attributo i18n non comporta alcun costo a runtime: Angular sostituisce il testo contrassegnato durante la compilazione per ogni lingua, generando un bundle ottimizzato separato. Nelle prossime lezioni estrarremo e tradurremo queste stringhe.

Verifica rapida

Come si traduce un attributo placeholder?

Riepilogo

Contrassegni il testo dei template con l'attributo i18n e gli attributi con i18n-attr. Aggiunga meaning|description per fornire il contesto e @@customId per ottenere ID stabili. I binding diventano segnaposto, mentre per le stringhe TypeScript si usa $localize. L'annotazione non comporta alcun costo a runtime.

Domande Frequenti

La lezione «Contrassegnare il testo da tradurre» è gratuita?

Sì — il testo completo di «Contrassegnare il testo da tradurre» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «Contrassegnare il testo da tradurre»?

Usare gli attributi i18n per contrassegnare il testo traducibile Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Contrassegnare il testo da tradurre»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Angular Academy?

Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Angular Academy