Documentazione

Il componente <t>

Inserisci i tuoi contenuti nel componente <t> per tradurli. Il contenuto originale viene mostrato fino al caricamento della traduzione.

<t>This content will be translated</t>

Anche il testo con associazioni funziona. Il contenuto viene tradotto nuovamente ogni volta che cambia, ad esempio quando cambia name:

<t>Hello {{ name() }}</t>

Per valori che cambiano spesso, come nomi e conteggi, usa invece le variabili, in modo che il testo venga tradotto una sola volta.

Tutte le traduzioni richieste contemporaneamente vengono inviate all'API in un'unica richiesta e le traduzioni vengono memorizzate nella cache. Puoi usare tutti i componenti <t> che desideri.

<mt-translate> funziona come selettore alternativo e Translate è lo stesso componente di T.

input

IngressoTipoDescrizione
formality'informal' | 'formal'Imposta la formalità della traduzione.
idstringTi consente di modificare questo uso del testo da solo. Non è impostato come id dell'elemento.
langLanguageSostituisce la lingua impostata con provideMagicTranslate.
vRecord<string, unknown>Valori non tradotti, indicati come $name nel contenuto. Vedi Variabili.
<t lang="fr" formality="formal">How are you?</t>

Variabili

Inserisci valori che cambiano, come un nome o un conteggio, in [v] e fai riferimento ad essi come $name nel contenuto:

<t [v]="{ name: user.name, count: unread() }">
  Hi $name, you have $count new messages
</t>

Magic Translate traduce il testo attorno ai valori una volta, come Hi {0}, you have {1} new messages, e reinserisce i valori nella tua app. La traduzione è memorizzata nella cache e funziona per ogni nome e conteggio, e i valori stessi non vengono mai inviati a Magic Translate. Quando cambiano solo i valori, non viene fatta alcuna nuova richiesta.

I valori sono numerati nell'ordine in cui appaiono per la prima volta. La traduzione può spostarli ovunque la lingua ne abbia bisogno, ad esempio {1} neue Nachrichten für {0}.

Il testo attorno ai valori può contenere HTML e i valori possono essere prima formattati con pipes:

<t [v]="{ count: cart.items.length, total: cart.total | currency }">
  You have <b>$count items</b> in your cart, totalling <b>$total</b>.
</t>

Alcune regole:

  • Vengono sostituite solo le chiavi [v], quindi un testo come $5 rimane così com'è. Se due tasti iniziano nello stesso modo, ad esempio count e counts, vince quello più lungo.
  • Lo stesso nome può apparire più di una volta.
  • I valori vengono inseriti come testo, mai come HTML. Inserisci invece un markup nel testo che li circonda: Hi <b>$name</b>.
  • Le variabili vengono sostituite solo nel testo, non in attributi come href o title.
  • In modalità sviluppo, una chiave che non appare nel testo registra un avviso, che rileva errori di battitura.
  • Con il rendering lato server, un <t> con [v] viene visualizzato vuoto sul server e viene visualizzato una volta che l'app viene eseguita nel browser.

Le variabili usano $name anziché {name} perché Angular legge un singolo { in un modello come inizio di un messaggio ICU e il modello non viene compilato.

Limitazioni

  1. Non puoi inserire componenti Angular all'interno del componente <t>. I semplici elementi HTML vanno bene (vedi l'esempio seguente). Il markup tradotto passa attraverso il sanificatore HTML di Angular.
  2. Il contenuto all'interno di un componente <t> non può superare i 10 KB, ovvero circa 5.000 caratteri.
<!-- this is OK, since <a> is a plain HTML element -->
<t>
  <a href="mailto:info@i42.ch">Please send us an email</a>
</t>


<!-- this does NOT work, since <app-button> is an Angular component -->
<t>
  <app-button>Click me</app-button>
</t>

Per tradurre attributi e altre stringhe, usa t pipe.

PrecedenteAngularProssimoIl t pipe