Aggiungi supporto multi-lingua a Angular

In questo tutorial ti porteremo attraverso il processo per rendere accessibile la tua app e l'user friendly per le persone in tutto il mondo. Solo circa il 20% del mondo parla inglese, quindi fornendo altre opzioni linguistiche può migliorare la tua esperienza utente e aumentare notevolmente la portata dell'app. Daremo uno sguardo agli strumenti di internazionalizzazione integrati dell'Angular e ti mostriamo come usarli correttamente.

Se stai costruendo un sito piuttosto che un'app, assicurati di avere il tuo set di strumenti. Guarda le nostre guide al meglio Builder del sito web e top. web hosting scoprire di più.

Abbiamo creato un'app demo molto semplice per dimostrare il processo. Clona lo da qui e quindi seguire le istruzioni di installazione.

Avvia l'app per familiarizzare con esso. Visualizza e aggiorna i numeri e i valori casuali con diversi contesti, ad es. Valute, date ecc. Collegheremo alcuni dei tubi e le caratteristiche utilizzate durante il tutorial.

• 17 tutorial di progettazione reattiva reattiva davvero utili

01. Termini chiave per le lingue di supporto

Ci sono due parole che vengono spesso utilizzate in modo intercambiabile quando si parla di tradurre un'app - Internazionalizzazione e localizzazione - Tuttavia, in realtà significano cose leggermente diverse. L'internazionalizzazione si riferisce al processo di preparazione della tua app per supportare lingue diverse. Al contrario, la localizzazione si riferisce al processo di tradurre effettivamente la tua app nelle lingue richieste. Essenzialmente l'internazionalizzazione è qualcosa che fai una volta per app, e la localizzazione avviene una volta per locale, almeno questo è il piano.

Questi termini potrebbero anche essere familiari nelle loro versioni abbreviate: i18n (dove 18 è il numero di lettere tra il primo "I" e l'ultimo 'n' di internazionalizzazione) e L10N (dove 10 è il numero di lettere tra il "Io" e il 'n' di localizzazione).

02. Qual è la localizzazione?

Ci sono oltre 6.000 lingue usate in tutto il mondo oggi, la maggior parte dei quali viene utilizzata solo da piccoli gruppi di persone. Eppure anche se ci concentriamo solo sulle prime tre lingue - mandarino, spagnolo e inglese - ci saranno differenze significative nella formattazione di data, struttura grammaticale, pluralizzazione e formattazione del numero.

Se includiamo il quinto linguaggio più usato - arabo - incontriamo un'altra differenza; L'arabo è uno script da destra a sinistra (RTL) che significa che anche l'interfaccia utente dovrà essere rispecchiato.

Quindi durante la localizzazione dobbiamo prendere in considerazione la grammatica, il layout e la formattazione delle differenze, e, naturalmente, dobbiamo anche cambiare il testo stesso. L'angolare può aiutare con molto di questo, ma avrai ancora bisogno di tradurre manualmente il testo (e salvare la traduzione in deposito cloud. , quindi è sicuro e condiviso con la tua squadra).

03. Locali in angolari

Avremo bisogno di localizzare per ogni locale che dobbiamo supportare. Un locale si riferisce alla serie generale di preferenze per le considerazioni sopra menzionate che tendono ad essere condivise all'interno di una regione del mondo, in genere un paese. Ogni locale è rappresentato da un identificatore locale Unicode, che specifica il codice della lingua e l'estensione locale.

La locale predefinita dell'Angular è "IT-US", che è il codice linguistico "en" (inglese) come parlato nella regione "Stati Uniti" (Stati Uniti d'America). Un'app localizzata per "IT-US" sarà sottilmente diversa da un'app localizzata per "EN-GB" che è l'inglese come parlato in Gran Bretagna. Ad esempio, nelle date statunitense sono (sconcertanti) formattati mm / gando / aaaaa, mentre qui nel Regno Unito usiamo l'approccio GG / MM / Aayyy più sensibile. Questa piccola differenza può comportare un grave errore nella comprensione.

Per rendere le cose interessanti, localizziamo la nostra app demo per arabo come parlato in Iraq, alias 'AR-IQ' e inglese come parlato nel Regno Unito, alias 'EN-GB'. Useremo l'inglese come predefinito questa volta.

04. Build Configuration.

Il nostro progetto DEMO è stato creato usando la CLI angolare, che include alcuni utili utensili. Utilizzeremo il compilatore davanti al tempo (AOT) per questo progetto, quindi abbiamo bisogno di apportare alcune modifiche al file di configurazione del CLI: 'Angular.json'. Se si desidera utilizzare Just-in-Time (JIT) è necessario configurare le cose in modo leggermente diverso.

Con una build AOT ottieni una piccola e più veloce rendering applicazione ready-to-go che carica senza la necessità di richieste asincroni per recuperare cose come modelli e fogli di stili. Di conseguenza è necessario creare una build per ogni locale e servire la bobina appropriata utilizzando l'URL o una specie di logica di rilevamento della lingua del lato server. L'approccio più semplice è creare una directory per ogni locale, ad es. www.example.com/en-gb e www.example.com/ar-iq. Il commercio è che non è possibile passare la lingua sul volo, ma in realtà è improbabile che sia qualcosa richiesto da utenti reali.

Prima di tutto dobbiamo aggiungere una configurazione di build per il nostro locale arabo. Nel file JSON cerca l'oggetto "architetto.build.configurations". Aggiungi il seguente blocco per definire una configurazione per la locale:

 "AR-IQ": {
    "BaseHref": "/ AR-IQ /",
    "Deployurl": "/ AR-IQ /",
    "OutputPath": "Dist / Angular-I18N-Demo /
AR-IQ ",
    "I18NFile": "SRC / Locale / Message.AR-IQ.
XLF ",
    "I18NFORMAT": "XLF",
    "I18NLocale": "AR-IQ" 

Questa configurazione racconta l'angolare dove emetterà la bobina compilata e quale file di traduzioni e formato da utilizzare. Imposta inoltre la locale e dice a quale directory verrà distribuita l'app.

Dobbiamo anche modificare le opzioni predefinite in 'architetto.build.optiontions' per utilizzare la locale "EN-GB". Impostare le seguenti proprietà come mostrato. NOTA Stiamo consentendo Aot qui attraverso il tabellone, quindi sarà utilizzato per la produzione e le build di sviluppo:

 "OutputPath": "Dist / Angular-I18N-Demo /
IT-GB ",
  "I18NLocale": "EN-GB",
  "Deployurl": "/ en-GB /",
  "BaseHref": "/ EN-GB /",
  "Aot": vero 

Impianti angolare supporta un numero di locali. Assicurati di utilizzare il valore corretto per la proprietà 'i18nlocale'. Puoi vedere l'elenco completo Qui .

Dietro le quinte le suddette configurazioni sono semplicemente caricate da uno di questi file di preferenza locale.

05. Servire Configuration.

Oltre a configurare l'output di build, è inoltre necessario configurare la configurazione per il comando "NG Service" per lo sviluppo. Questo è più semplice come possiamo semplicemente fare riferimento alla configurazione Build che abbiamo appena aggiunto. In 'Angular.json' aggiungi il seguente blocco a 'architect.serve.configurations':

 "AR-IQ": {
    "BrowsertArget": "Angular-i18n-
Demo: Build: AR-IQ ",
    "Servepath": "/ AR-IQ /"
  } 

Qui ci riferiamo le opzioni di configurazione della build utilizzando la proprietà "Browsertarget" e stiamo anche impiando il "ServePath". Prima di poter funzionare o costruire l'app araba, dobbiamo creare il file di traduzione referenziato nella proprietà 'i18nfile' sopra. La CLI angolare include uno strumento per estrarre il testo contrassegnato in un file sorgente di traduzione standard.

Collegheremo questi file in modo più dettagliato in seguito nel tutorial, ma per ora abbiamo solo bisogno di esportare il file di base e vuoto per consentirci di compilare.

Utilizzeremo il comando 'ng xi18n' con le seguenti opzioni. Questa è l'unica volta che includeremo l'ID locale nel nome del file '-out-file':

 $ NG XI18N --Output-Path Locale --Out-File
messaggi.AR-IQ.XLF --I18N-LOCALE AR-IQ 

Questo dovrebbe creare un file in una directory SRC / Locale. D'ora in poi emetteremo sempre il file denominato 'message.xlf' e copialo manualmente sulla versione con l'ID locale nel nome. La ragione di ciò è quella di impedire allo strumento di estrazione la sovrascrittura di eventuali traduzioni esistenti che abbiamo aggiunto al file.

06. Switch Configuration.

A questo punto possiamo ora compilare il progetto e vedere cosa succede, ma dobbiamo dire al comando "NG Serve" quale configurazione da utilizzare. Prima diamo un'occhiata alla versione inglese. Nessuna modifica qui perché l'inglese è il valore predefinito:

 $ NG Serve 

Come puoi vedere sembra molto simile alla versione originale, che utilizza la locale predefinita dell'Angular di "IT-US". La notevole differenza è la valuta ora specifica US $ invece di solo $. Ok, ora proviamo la versione araba. Arresta la versione inglese ed esegui:

 $ NG Servire --Configuration = AR-IQ 

Come ti aspetteresti ci sono differenze più ovvie in questa versione, in particolare la data è ora scritta in arabo. L'angolare può farlo perché i nomi di alcune cose, come mesi e giorni, provengono da una lista set e in definitiva si riferiscono a un numero noto. Tutto il resto, tuttavia, è ancora in inglese.

07. Tubi a consapevoli della locale

Fai uno sguardo più da vicino al codice sorgente di 'app.component.html' e vedrai che usiamo un numero di tubi diversi. I seguenti tubi angolari sono consapevoli del locale, il che significa che adattano la loro produzione in base alla posizione internazionale: "DatePipe", "Currencypepe", "decimalpipe" e "percentuale".

Se si utilizzano questi tubi accuratamente angolari gestiranno molta la legame di localizzazione per te. Con attentamente intendiamo utilizzare le opzioni predefinite disponibili ovunque tu possa. Un buon esempio è la formattazione degli Stati Uniti VS UK date che abbiamo menzionato in precedenza. Se sei nel Regno Unito e vuoi visualizzare una data utilizzando il formato (sensibile) del mese-mese, potresti essere frustrato per scoprire che l'opzione "" shortDate "predefinita viene eseguita come m / d / aa (ad es . 10/9/18) e essere tentato di hardcode il tuo formato desiderato come questo:

 {{MyDate | Data: 'DD / MM / Y'}} 

Ma ora sappiamo che otteniamo il formato m / d / aa perché angolare utilizza il locale "IT-US" per impostazione predefinita. Quindi, invece di hardcoding del formato, dovremmo usare l'opzione '' shortdate '' e localizzare la nostra app per utilizzare 'IT-GB'.

 {{MyDate | Data: 'ShortDate'}} 

Ci vuole un po 'più di sforzo, ma quindi possiamo aggiungere locali al contenuto del nostro cuore e avere sempre un formato di data user-friendly.

08. Prevalere le opzioni predefinite

Sfortunatamente non sembra che ci sia un modo facile e integrato per sovrascrivere un formato predefinito. Ad esempio, non puoi semplicemente decidere che preferiresti che il formato "shortdate" sia dd / mm / aaaa invece di DD / mm / y in quanto non c'è modo di modificare il formato in fase di esecuzione. Inoltre non puoi aggiungere le tue opzioni predefinite.

Per questi casi di bordo è possibile creare un tubo data personalizzato che avvolge il "DatePipe" angolare e gestisce qualsiasi formato personalizzato per locale. Tutto ciò che non riconosce sarebbe passato al "DatePipe" incorporato.

09. Currencypepe.

OFF Lo scaffale La "Currencypepe" formaterà un numero come dollari USA, tagliare a due punti decimali e aggiungerà raggruppamenti come definiti nelle preferenze della Locale.

Noterai che in entrambi i nostri locali la valuta è sempre in dollari USA. Non passa magicamente su Sterling (GBP) quando si utilizza la località interna 'EN-GB'. La ragione di ciò è che £ 10 non è la stessa di $ 10, quindi è necessario specificare esplicitamente la valuta a cui si riferisce il numero.

Aggiorniamo 'app.component.html' per utilizzare GBP in tutto. Quando si specifica il codice valuta è necessario utilizzare il valore corretto dallo standard ISO 4217 (elenco disponibile online).

Modificare i due tubi di valuta aggiungendo ':' GBP '' come così:

 {{Value $ | Async |. Valuta: 'GBP'}} 

E inizierai a vedere il simbolo £ invece di US $.

Ricorda, non fa nulla di intelligente come convertire automaticamente USD nel valore equivalente in GBP se si modifica la valuta - cambia semplicemente il simbolo che utilizza.

10. Flusso di lavoro di traduzione

Ok, quindi abbiamo i nostri due locali configurati e l'angolari è abilmente facendo parte del lavoro per noi fuori dalla scatola, ma il testo è tutto ancora in inglese. L'angolare non può tradurre questo automaticamente, purtroppo, ma può aiutarci con parti del flusso di lavoro. Questo è ciò che deve accadere:

• Bandiera Testo statico in tutti i componenti per la traduzione
• File di traduzione delle esportazioni contenente questo testo statico
• Modifica il file di traduzione e aggiungi le traduzioni pertinenti
• Unisci un file di traduzione tradotto in app

Angular ci aiuta con i passaggi 2 e 4, ma come sviluppatori abbiamo bisogno di fare il punto 1 manualmente. Il passaggio 3 sarà in genere completato da un professionista di traduzione o un'agenzia, utilizzando un software speciale per leggere e aggiornare il file di traduzione.

11. Dettagli dell'asse

Per ottenere questo dobbiamo aggiungere un attributo speciale ad ogni elemento che contiene un testo fisso da tradurre. Per essere chiari se il contenuto arriva da un'API, allora non è un testo fisso e dovresti localizzarlo nell'API. Devi solo aggiungere l'attributo quando il testo è scritto direttamente nel modello HTML nel tuo codice sorgente. Un punto chiave qui è che dovresti provare a mantenere i tuoi file dattiloscritti locale-agnostico - in altre parole, evitare di mettere qualsiasi testo che deve essere tradotto nella logica dei componenti e mantenere tutto nei modelli. Altrimenti lo strumento di estrazione non sarà in grado di estrarlo. Sono buone pratiche comunque per separare le tue preoccupazioni - nella vita e nel codice.

Aprizziamo 'app.component.html' e inizia con il titolo "Valore corrente". Basta aggiungere l'attributo 'i18n' all'elemento che contiene direttamente il testo.

 & lt; div class = "meta__title" i18n & gt;
     Valore corrente
   & lt; / div & gt; 

È importante capire che questo è solo un attributo personalizzato "stupido". Non è una direttiva angolare che innesca qualcosa di runtime, infatti, il compilatore lo rimuove dopo la traduzione.

Ad ogni modo, vediamo cosa succede quando eseguiamo di nuovo lo strumento di estrazione per rigenerare il file di traduzione. Ricorda '--Out-file' è solo 'messaggi.xlf' ora:

 $ NG XI18N --Output-Path Locale --Out-File
messaggi.XLF --I18N-LOCALE AR-IQ 

Apri il file XLF di output e dovresti vedere un nuovo blocco unità di traduzione che sembra qualcosa di simile con alcune informazioni di contesto aggiuntive:

 & lt; trans-unit id = "face3d45c0f0cd38b726e7798Da15
3E2F8D55551 "Datatipo =" HTML "& GT;
    & lt; fonte e GT;
      Valore corrente
    & lt; / source & gt; 

Ottimo, questo significa che lo strumento ha raccolto l'attributo "i18n". Quell'ID lungo è generato dallo strumento e rimarrà lo stesso a meno che il testo non cambi. Se hai più istanze esattamente dello stesso testo, ottengono lo stesso ID. Non modificare questo ID!

Se preferisci, è possibile specificare un ID personalizzato all'interno dell'attributo 'I18N'. Se lo fai, l'ID rimarrà lo stesso anche se il testo cambia, quindi devi essere sicuro che non hai collisioni ID durante la tua app. Utilizzare il prefisso '@@' per impostare un ID personalizzato. Qui l'ID diventerà "titolo":

 & lt; div class = "meta__title" i18n = "@@ title" & gt;
     Valore corrente
   & lt; / div & gt; 

12. Aggiungi un po 'di contesto

Per garantire che il traduttore sia in grado di fornire una traduzione accurata che spesso dovranno conoscere il contesto che il testo viene utilizzato in. L'attributo 'i18n' ci consente di definire una descrizione e un significato per aiutare il traduttore. Il formato è il seguente:

 & lt; div i18n = "significato | Descrizione @@
Personalizzato "& GT; Text & Lt; / Div & GT; 

Aggiorniamo il nostro titolo con un significato e descrizione:

 & lt; div class = "meta__title" i18n = "carta
Titolo | Valore in questo momento in tempo @@ Titolo "& GT;
     Valore corrente
   & lt; / div & gt; 

Questo dovrebbe dare al traduttore abbastanza contesto per fornire una traduzione accurata. Rigenerare il file di traduzione e dovresti vedere questi valori sono stati emessi. Vale la pena notare che se non si utilizza un ID personalizzato, l'ID generato ha il significato e il testo in considerazione. Quindi lo stesso testo, ma con un significato diverso, otterrà un ID diverso. La descrizione, tuttavia, non ha alcun impatto sull'ID.

13. Testo con variabili

Passiamo alla sezione Intro. Il primo paragrafo contiene testo e una variabile che sarà interpolata in fase di esecuzione. Come gestiamo questo?

Bene felicemente è abbastanza semplice. Ancora una volta abbiamo bisogno di aggiungere un attributo significativo "i18n" all'elemento contenente. Aggiungilo direttamente all'elemento paragrafo:

 & lt; p i18n = "valore di chiusura | valore quando il mercato
Chiuso ieri @@ ClosingValue "& GT;
Esegui di nuovo lo strumento di estrazione e vedrai questa nuova unità di traduzione:
  & lt; trans-unit id = "closingvaluelue"
Datatipo = "HTML" e GT;
    & lt; fonte e GT; ieri e amp; APOS; s Valore di chiusura era
& lt; x id = "interpolazione" equiv-text = "{{{{
ClosingValue |. Valuta: & amp; APOS; GBP & AMP; APOS;
}} "/ & gt; & lt; / source & gt; 

Guarda come l'interpolazione variabile è stata dettagliata nell'output. La cosa bella di questo è consente al traduttore di modificare la struttura grammaticale della frase, se necessario, senza rompere il legame. Ad esempio, potrebbe esserci una lingua in cui la frase sarebbe stata la migliore scritta: il valore X è stato la chiusura di ieri, cioè con la variabile all'inizio.

14. Pluralizzazione

Passando al paragrafo successivo vedrai qualche sintassi intimidatoria. Questo è chiamato formato di messaggio ICU e consente di specificare diversi blocchi di testo in base al valore di una variabile.

Puoi usarlo per aggiungere le "S" alle parole in inglese quando il valore è zero o non uno. Ad esempio, se 'secondi' è una variabile contenente il numero di secondi in cui possiamo utilizzare questa espressione di pluralizzazione ICU:

 {{secondi}} {secondi, plurale, uno
{secondo}, altri {secondi}} 

Che verrà emesso:

• 0 secondi
• 1 secondo
• 2 secondi

Non sembra essere documentato ma puoi anche utilizzare l''asyncpipe' all'interno della sintassi della pluralizzazione per funzionare con gli osservabili.

In quell'esempio 'uno' e 'altro' sono categorie di pluralizzazione. Ci sono un certo numero di categorie tra cui scegliere, ma attenzione! Non tutti i locali supportano tutte le categorie, e l'angolare non ti dice se si tenta di utilizzare una categoria che non è supportata dalla locale corrente. È facile finire di pensare che tu abbia fatto qualcosa di sbagliato perché la categoria "Due" non funziona nella tua località "EN-GB" e invece stai vedendo il testo 'Altro'. Insplicibilmente "IT" (e molte altre lingue comuni) supportano solo "uno" e "altro", anche se 'zero' e 'due' sono valori espliciti.

Dai un'occhiata a questo file per vedere cosa è effettivamente supportato.

15. I più grafici a barre radiali multipli

Possiamo aggirare questa limitazione utilizzando numeri anziché categorie. Prefisso solo il valore con un '=':

 là {Watchers, Plural, = 0 {non è nessuno} = 1
{è una persona} = 2 {sono due persone}
    altri {{{{watchers}} persone}}
Guardare in questo momento. 

Questo è già istituito nell'app Demo, abbiamo solo bisogno di aggiungere l'attributo "I18N" al paragrafo contenente:

 & lt; p i18n = "Watchers | Numero di persone
Guardare il valore @@ watchers "& gt; 

Esegui di nuovo lo strumento di estrazione per vedere come appare questo. Vedrai che questo viene emesso leggermente in modo diverso. Creerà due unità di traduzione; uno per l'espressione ICU stessa e uno che interpola quell'espressione nella stringa originale.

16. Seleziona espressione.

Se si desidera visualizzare un testo diverso a seconda del valore di una variabile è possibile utilizzare un'espressione ICU "Seleziona" che è molto simile alla sintassi "plurale" dimostrata sopra. Nel nostro App Demo monitoriamo la modifica applicata al valore e creiamo un flusso osservabile chiamato "Trend $ 'che emette" su "," giù "o" stabile "a seconda che il cambiamento sia positivo, negativo o zero.

Abbiamo quindi collegato la nostra espressione di ICU "Seleziona" per emettere una stringa diversa a seconda del valore del flusso. Qui puoi vedere l'Asyncpipe in uso:

 Il valore {Trend $ | Async, selezionare, su
{aumentato} down {diminuito} stabile
    {non ha cambiato}} 

Questa è una sintassi un po 'più pulita che usare' ngif 'o' ngswitch 'per manipolare il DOM, oltre a svolgere anche bene con lo strumento di estrazione. Aggiungi l'attributo 'i18n' all'elemento contenente:

 & lt; div class = "card__info" i18n = "valore
Trend | Descrive il valore Change Trend @@ Trend "& GT; 

Rigenera il file di traduzione e vedrai che l'approccio è simile all'uscita plurale, con due unità di traduzione create. Le espressioni ICU sono piuttosto utili Una volta che ti abitui a loro, inoltre puoi nidificarli per creare uscite più complesse.

17. Aggiungi traduzioni

Un altro attributo 'I18N' per aggiungere:

 & lt; div class = "card__info" i18n = "transazioni
Conta | Numero di transazioni oggi @@
Transazioni "e GT;
     Transazioni: {{Transactions $ | Async |.
Numero}}
   & lt; / div & gt; 

Ora abbiamo segnato tutto il testo che ha bisogno di tradurre possiamo generare il file di traduzione un'ultima volta. Una volta creato rinominarlo in "messaggi.AR-IQ.XLF" e sostituire l'incarnazione precedente. Questo è il file che avremmo inviato al professionista della traduzione, ma ai fini di questo tutorial, Google Translate sarà in piedi!

Apri il file XLF e duplicati ogni '& lt; sorgente e GT;' elemento, rinominarlo '& lt; target & gt;'. Sfortunatamente può essere piuttosto disordinato, quindi potrebbe aiutare ad abbellire il contenuto.

Per verificare che li abbiamo tutti, salva il file e avvia l'app con l'Arabic Locale:

 $ NG Servire --Configuration = AR-IQ 

Se vedi qualsiasi messaggio nel terminale in questo modo significa che ti hai perso uno:

 Errore nell'errori Xliff Parse: Messaggio * ID *
manca una traduzione ("

Speriamo che non avresti errori e sarai in grado di vedere l'app nel browser. Non abbiamo ancora aggiunto alcun arabo reale, quindi non sembrerà molto diverso.

18. Google Translate.

Iniziamo con qualcosa di facile - il titolo "Valore corrente". Google Translate mi dice che dovrebbe essere (testo arabo qui) quindi aggiorna il valore nel '& lt; target & gt; elemento:

 & lt; Source & GT; Valore attuale & Lt; / Source & GT;
       & lt; target & gt; testo arabo qui & lt; / target & gt; 

Fin qui tutto bene. Ora facciamo uno con l'interpolazione. Ecco "Il valore di chiusura di ieri era ..." (si spera!):

 & lt; target & gt; testo arabo qui & lt; x
ID = "Interpolazione" Equiv-Text = "{{ClosingValue
| Valuta: & amp; APOS; GBP & AMP; APOS; }} "/>.</target>

Utilizzare un numero quando si traduce in modo da poter vedere dove dovrebbe essere l'interpolazione. Si noti che quando si vede il risultato tradotto in Google Translate, apparirà invertito - vale a dire il numero all'inizio - ma quando lo copia e si incolla nel file di traduzione, tornerà all'ordine originale. Questo sta accadendo perché l'arabo è un linguaggio RTL in modo che lo script sia (quasi) interamente rispecchiato. Google Translate fa questo aggiungendo A 'Dir = "RTL"' Attributo all'elemento contenente. Impareremo come farlo nel prossimo passo. Il resto delle traduzioni è disponibile nel repo demo, "Tutorial" Branch.

19. Direzione dello script.

Dobbiamo gestire la direzione dello script nella nostra app perché Angular non lo farà automaticamente per noi. Inoltre non sembra che sia in alcun modo per rilevare se il locale corrente è un linguaggio LTR o RTL, quindi dovremo hardcode questo. Sarebbe fantastico se angolare ha offerto una direttiva integrata per questo.

Apri 'app.component.ts'. Importa 'Injetto', 'Locale_ID' e 'Hostbinding' da '' @ Angular / Core ''. Quindi configurare il "hostbinding" come segue. Questo aggiungerà un attributo 'dir' all'App Componente e impostare la direzione della lingua predefinita a 'ltr':

 @Hostbinding ('attr.Dir') DIR = 'LTR'; 

Avanti Aggiungi un costruttore e iniettare il 'Locale_ID'. Ricorda che questo è impostato dalla nostra configurazione perché stiamo usando AOT.

 Costruttore (@Inject (Locale_ID) Private Locale: String) {} 

E infine aggiungere il seguente snippet al metodo "Ngoninit" esistente. Qui stiamo controllando se il "Locale_id", cioè "AR-IQ", inizia con "AR" e se cambia invece la direzione per "RTL".

 IF (questo.Locale.Startswith ('AR')) {
     questo.dir = 'rtl';
} 

Se hai intenzione di supportare più locali, probabilmente dovrai refatturarlo per renderlo più scalabile, tuttavia, poiché ci sono solo dieci lingue RTL in uso oggi questo approccio non dovrebbe essere troppo ingombrante. Avvia l'app araba e ora dovresti vedere che l'interfaccia utente è specchiata: il segno £ dovrebbe essere sulla destra.

20. Produzione

Il passo finale è generare e controllare le nostre build di produzione. Innanzitutto, tuttavia, dobbiamo fare un'altra modifica rapida alla configurazione 'Angular.json'.

In 'architetto.build.configurations' duplica l'oggetto di produzione esistente e rinominarlo '"production-ar-iq"'. Quindi copia e incolla le proprietà dalla configurazione "" AR-IQ "esistente nell'oggetto, in modo da avere sia le opzioni di produzione che le opzioni" I18N ".

Devi anche aggiornare anche "architetto.serve.configurations". Questa volta ha duplicato l'oggetto "" AR-IQ "esistente e rinominarlo '" Production-AR-IQ "e modifica il valore' BROWSERTARGET 'per puntare alla nuova configurazione" Production-AR-IQ ".

Ora puoi costruire e servire la tua proprietà araba di produzione con questo comando:

 $ NG Servire --Configuration = Production-AR-IQ 

Ok, abbiamo finito! Abbiamo internazionalizzato con successo la nostra app e lo localizzò per il pubblico "EN-GB" e "AR-IQ". Angular rende il processo straordinariamente semplice per lo sviluppatore, infatti, il bit più difficile sta immaginando cosa dovrebbero essere le traduzioni - scuse a qualsiasi altoparlante arabo se qualcosa è sbagliato!

Questo articolo è stato originariamente pubblicato in questione 281 di Web Designer di Web Design Web Design. Acquista il problema 281 qui o Iscriviti al web designer qui .

Articoli Correlati:

• Come costruire un sito web a pagina completa in angolari
• I migliori computer portatili per la programmazione nel 2019
• Come costruire un'app