Angular semplifica gli aspetti legati all'internazionalizzazione delle applicazioni (anche detta i18n), consentendo di gestire più facilmente la visualizzazione di dati e numeri in formato locale, oltre che alla traduzione del testo.
Per indicare che un certo pezzo del template va localizzato, è sufficiente utilizzare l'attributo i18n, in questo modo:
<h1 i18n>Welcome</h1> <img [src]="logo" i18n-title title="Angular logo" />
Questo attributo è custom ed è utilizzato dai tool per questo scopo e viene rimosso, dopo la compilazione, poiché non è una direttiva. Si noti come varia l'utilizzo se dobbiamo localizzare il contenuto di un campo, piuttosto che un'attributo.
Il file di estrazione genererà quindi un file con tutte le entry trovate nei template. In particolare, dovremo usare il comando della CLI:
ng xi18n
Di default sarà generato un file di nome messages.xlf all'interno della directory src, utilizzando in formato XLIFF 1.2, ma sono supportati anche XLIFF 2 e XMB.
Ogni file dovrà avere il locale specificato nel nome del file, ad esempio messages.it.xlf, con la relativa localizzazione.
Come comportamento di default Angular utilizza en-US, che è il locale dell'inglese americano, ma è possibile specificare anche il locale via CLI (sfruttando l'AOT compiler, che consente di creare un'applicazione già pronta all'esecuzione):
ng serve --aot --locale it
Tutti i locale supportati sono disponibili su
https://github.com/angular/angular/tree/master/packages/common/locales
Alternativamente, è possibile utilizzare anche la localizzazione con JIT, come spiegato sulla pagina della documentazione ufficiale:
https://angular.io/guide/i18n
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Copiare automaticamente le secret tra più repository di GitHub
Utilizzare Tailwind CSS all'interno di React: installazione
Reactive form tipizzati con FormBuilder in Angular
Utilizzare i primary constructor di C# per inizializzare le proprietà
Usare Refit e Polly in Blazor per creare client affidabili e fortemente tipizzati
Usare un KeyedService di default in ASP.NET Core 8
Creare gruppi di client per Event Grid MQTT
Creare form tipizzati con Angular
Modificare i metadati nell'head dell'HTML di una Blazor Web App
Sfruttare MQTT in cloud e in edge con Azure Event Grid
Utilizzare il trigger SQL con le Azure Function
Configurare policy CORS in Azure Container Apps
I più letti di oggi
- Utilizzare WebAssembly con .NET, ovunque
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- Utilizzare il trigger SQL con le Azure Function
- Disabilitare automaticamente un workflow di GitHub (parte 2)
- Paginare i risultati con QuickGrid in Blazor
- Ottimizzazione dei block template in Angular 17