Adăugați suport multi-limbă la unghiular

În acest tutorial vom ajunge prin procesul de a vă face aplicația accesibilă și ușor de utilizat pentru oamenii din întreaga lume. Doar aproximativ 20% din lume vorbește engleza, astfel încât să ofere alte opțiuni de limbă vă poate îmbunătăți experiența dvs. de utilizator și crește foarte mult la îndemâna aplicației. Vom arunca o privire la instrumentele de internaționalizare încorporate și vă arăt cum să le folosiți corect.

Dacă construiți un site, mai degrabă decât o aplicație, asigurați-vă că aveți dreptul la setul de instrumente. Vedeți ghidurile noastre la cele mai bune Builder de site-uri web și de sus web hosting pentru a afla mai multe.

Am creat o aplicație demo foarte simplă pentru a demonstra procesul. Clonează-o de aici și apoi urmați instrucțiunile de instalare.

Porniți aplicația pentru a vă familiariza cu ea. Afișează și actualizează numere și valori aleatorii cu diferite contexte, de ex. valute, date etc. Vom acoperi unele dintre conductele și caracteristicile utilizate în timpul tutorialului.

• 17 Tutoriale de design receptive cu adevărat utile

01. Termeni-cheie pentru susținerea limbilor

Există două cuvinte care sunt adesea folosite interschimbabil atunci când vorbesc despre traducerea unei aplicații - internaționalizarea și localizarea - cu toate acestea, ei înseamnă, de fapt, lucrurile puțin diferite. Internaționalizarea se referă la procesul de pregătire a aplicației dvs. pentru susținerea diferitelor limbi. În contrast, localizarea se referă la procesul de traducere a aplicației dvs. în limbile dvs. obligatorii. În esență internaționalizarea este ceva ce faceți o dată pe aplicație, iar localizarea se întâmplă o dată pe locale - cel puțin acesta este planul.

Acești termeni ar putea fi, de asemenea, familiarizați în versiunile scurte: I18N (unde 18 este numărul de scrisori dintre primul "I" și ultimul "n" de internaționalizare) și L10N (unde 10 este numărul de scrisori dintre "i" și "n" de localizare).

02. Ce este localizarea?

Există peste 6.000 de limbi folosite astăzi în întreaga lume, majoritatea fiind folosite numai de grupuri foarte mici de oameni. Cu toate acestea, chiar dacă ne concentrăm doar pe primele trei limbi - Mandarin, Spaniolă și Engleză - vor exista diferențe semnificative în formatarea datei, structura gramaticală, pluralizarea și formatarea numărului.

Dacă includem al cincilea limbaj cel mai utilizat - Arabă - întâlnim o altă diferență; Arabă este un script de dreapta-la-stânga (RTL), ceea ce înseamnă că UI va trebui, de asemenea, să fie reflectat.

Deci, în timpul locuizării, trebuie să luăm în considerare diferențele de gramatică, layout și formatarea și, bineînțeles, trebuie să schimbăm textul în sine. Unghiul poate ajuta cu multe din acestea, dar totuși veți avea nevoie să traduceți manual textul (și să salvați traducerea în Stocare in cloud , deci este sigură și acreară cu echipa dvs.).

03. Localales în unghiular

Va trebui să localizăm pentru fiecare localitate pe care trebuie să o susținem. O localizare se referă la setul general de preferințe pentru considerațiile menționate mai sus care tind să fie împărtășite în cadrul unei regiuni a lumii, de obicei o țară. Fiecare localizare este reprezentată de un identificator Unicode Locale, care specifică codul de limbă și extensia localei.

Localizarea implicită a unghiului este "en-US", care este codul lingvistic "EN" (engleză) ca fiind vorbită în regiunea "SUA" (Statele Unite ale Americii). O aplicație localizată pentru "en-US" va fi subtilă diferită de o aplicație localizată pentru "EN-GB", care este engleza ca fiind vorbită în Marea Britanie. De exemplu, în datele americane sunt (Bafflindenly) formatate mm / dd / aaaa, în timp ce aici în Marea Britanie folosim abordarea mai sensibilă DD / MM / AAAAA. Această diferență minoră poate duce la o eroare majoră în înțelegerea.

Pentru a face lucrurile interesante Să se localizăm aplicația demo pentru arabă ca vorbită în Irak, aka "AR-IQ" și engleză ca vorbită în Marea Britanie, aka 'en-GB'. Vom folosi limba engleză ca implicită de data aceasta.

04. Construiți configurarea

Proiectul nostru demo a fost creat folosind CLI unghiulară, care include unele unelte utile. Vom folosi compilatorul înainte (AOT) pentru acest proiect, așa că trebuie să facem câteva modificări în fișierul de configurare al CLI: "angular.json". Dacă doriți să utilizați Just-In-Time (JIT), trebuie să configurați lucrurile ușor diferit.

Cu o construire AOT, obțineți o aplicație mică, mai rapidă, care se încarcă fără necesitatea unor cereri asincrone pentru a aduce lucruri precum șabloanele și stilurile de stil. Ca rezultat, trebuie să creați o construcție pentru fiecare localizare și să serviți construirea corespunzătoare utilizând adresa URL sau un fel de logică de detectare a limbii de server. Cea mai simplă abordare este de a crea un director pentru fiecare localizare, de ex. www.example.com/en-gb și www.example.com/ar-iq. Comerțul este că nu puteți schimba limba la zbor, dar în realitate este puțin probabil să fie ceva cerut de utilizatorii reali.

În primul rând, trebuie să adăugăm o configurație de construcție pentru localizarea noastră arabă. În fișierul JSON căutați obiectul "arhitect.build.configurații". Adăugați următorul bloc pentru a defini o configurație pentru localizarea:

 "AR-IQ": {
    "basehref": "/ ar-iq /",
    "Deployerl": "/ AR-IQ /",
    "OutputPath": "DIST / ANGULAR-I18N-DEMO /
AR-IQ ",
    "I18Nfile": "SRC / Locale / Mesaje.Ar-IQ.
xf ",
    "i18nformat": "XLF",
    "I18Nlocale": "AR-IQ" 

Această configurație indică unghiular unde să transmită construirea compilată și ce fișier și format de traducere de utilizat. De asemenea, stabilește localizarea și spune unghiular care director va fi implementat aplicația.

De asemenea, trebuie să modificăm opțiunile implicite în "arhitect.build.options" pentru a utiliza localizarea "en-gb". Setați următoarele proprietăți așa cum se arată. Notă Suntem AOOT aici de-a lungul consiliului, astfel încât să fie utilizat pentru producție și dezvoltare construi:

 "OutputPath": "DIST / ANGULAR-I18N-DEMO /
en-gb ",
  "I18Nlocale": "en-GB",
  "Deployerl": "/ en-gb /",
  "basehref": "/ en-gb /",
  "AOT": Adevărat 

Unghiul suportă un număr de locații. Asigurați-vă că utilizați valoarea corectă pentru proprietatea "i18nlocale". Puteți vedea lista completă Aici .

În spatele scenelor configurațiile de mai sus se încarcă și se citesc de la unul dintre aceste fișiere de preferință locale.

05. Serviți configurația

În plus față de configurarea producției de construcție, trebuie, de asemenea, să configuram configurația pentru comanda "NG SERVER" pentru dezvoltare. Acest lucru este mai simplu, deoarece putem trimite pur și simplu configurația de construcție pe care tocmai am adăugat-o. În "Angular.json" se adaugă următorul bloc către "arhitect.serve.configurații":

 "AR-IQ": {
    "Browsergarget": "Angular-i18n-
Demo: Construi: Ar-IQ ",
    "Servepath": "/ AR-IQ /"
  } 

Aici ne referim la opțiunile de configurare a construirii utilizând proprietatea "Browsertarget" și, de asemenea, stabilim "Servepath". Înainte de a putea servi sau construi aplicația arabă, trebuie să creăm fișierul de traduceri referit în proprietatea "i18nfile" de mai sus. Unghiul CLI include un instrument pentru extragerea textului marcat într-un fișier sursă de traducere standard.

Vom acoperi aceste fișiere în detaliu mai târziu în tutorial, dar pentru moment, trebuie doar să exportăm fișierul de bază, gol pentru a ne permite să ne compilem.

Vom folosi comanda "NG XI18N" cu următoarele opțiuni. Aceasta este singura dată când vom include ID-ul Locale în numele fișierului "- File":

 $ ng xi18n-output-calea locale - dosar
mesaje.ar-iq.xlf -i18n-locale AR-IQ 

Acest lucru ar trebui să creeze un fișier într-un director SRC / Localizare. De acum înainte vom transmite întotdeauna fișierul numit "mesaje.xlf" și copiați manual pe versiunea cu ID-ul Locale în nume. Motivul pentru aceasta este de a împiedica instrumentul de extracție să suprascrie orice traduceri existente pe care le-am adăugat la fișier.

06. Configurarea comutatorului

În acest moment, acum putem compila proiectul și putem vedea ce se întâmplă, dar trebuie să spunem comanda "NG Server" care configurația de utilizat. Mai întâi să aruncăm o privire la versiunea în limba engleză. Nu există nicio modificare aici pentru că limba engleză este implicită:

 $ ng servi 

După cum puteți vedea, se pare foarte asemănător versiunii originale, care utilizează localizarea implicită a unghiului de "en-US". Diferența notabilă este că moneda se specifică acum $ în loc de doar $. Bine, acum să încercăm versiunea arabă. Opriți versiunea în limba engleză și executați:

 $ ng servi --configuration = ar-iq 

Așa cum ați aștepta, există diferențe mai evidente în această versiune, în special data este acum scrisă în limba arabă. Unghiul poate face acest lucru deoarece numele unor lucruri, cum ar fi luni și zile, provin dintr-o listă stabilită și în cele din urmă se referă la un număr cunoscut. Totul altceva, totuși, este încă în limba engleză.

07. Țevi conștiente de localizare

Uitați-vă mai mult la codul sursă al "App.component.html" și veți vedea că vom folosi o serie de țevi diferite. Următoarele țevi unghiulare sunt conștiente de localizare, ceea ce înseamnă că își adaptează puterea pe baza localei actuale: "DataPipe", "Currencypipe", "Decimalpipe" și "ProcentPipe".

Dacă utilizați aceste țevi cu atenție unghiulară se va ocupa de o mulțime de lucrări de localizare pentru dvs. Cu atenție, înțelegem opțiunile predefinite disponibile oriunde puteti. Un exemplu bun este modelul US VS Marea Britanie pe care l-am menționat mai devreme. Dacă sunteți în Marea Britanie și doriți să afișați o dată utilizând formatul (sensibil) de zi cu zi, este posibil să fiți frustrați pentru a afla că opțiunea predefinită "Shortdate" "ca m / d / yy (de ex . 10/9/18) și să fie tentați la codul dvs. Hard Formatul dorit ca acesta:

 {{mydate | Data: "dd / mm / y '}} 

Dar acum știm că vom obține formatul M / D / YY deoarece unghiular folosește localizarea "en-US" în mod implicit. Deci, în loc de procesul de înscriere, ar trebui să folosim opțiunea "Shortdate" și localizarea aplicației noastre pentru a utiliza "en-GB".

 {{mydate | Data: "Shortdate"}} 

Este nevoie de un mic efort mai mic, dar apoi putem adăuga locații la conținutul inimii noastre și avem întotdeauna un format de date prietenos.

08. Înlăturarea opțiunilor predefinite

Din păcate, nu pare că există o modalitate ușoară, încorporată de a suprascrie un format predefinit. De exemplu, nu puteți decide că preferați formatul "Shortdate" pentru a fi dd / mm / aaa în loc de dd / mm / y, deoarece nu există nici o modalitate de a modifica formatul la timpul de execuție. De asemenea, nu puteți adăuga propriile opțiuni predefinite.

Pentru aceste cazuri de margine ați putea crea o țeavă de date personalizată care împachetează și mânerează un angular "și se ocupă de orice formate personalizate pe localizare. Orice nu recunoaște că va fi transmis la "DataPipe" încorporată.

09. currenpape

Dezactivat raftul "valutura" va forma un număr ca dolar american, ornamente la două zecimale și se adaugă grupări așa cum sunt definite în preferințele locale.

Veți observa că în ambele localizări, moneda este întotdeauna în dolari americani. Nu trece magic la sterlină (GBP) când utilizați localizarea "en-gb". Motivul pentru aceasta este că £ 10 nu este același cu 10 $, deci trebuie să specificați în mod explicit moneda la care se referă numărul dvs.

Să actualizăm "aplicația.Component.html" pentru a utiliza GBP pe tot parcursul anului. Când specificați codul valutar, trebuie să utilizați valoarea corectă din standardul ISO 4217 (lista disponibilă online).

Modificați cele două țevi valutare prin adăugarea ":" GBP "" ca așa:

 {{valoare $ | Async | Moneda: "GBP"}} 

Și veți începe să vedeți simbolul £ în loc de US $.

Amintiți-vă, nu face nimic inteligent ca să convertiți automat USD la valoarea echivalentă în GBP dacă schimbați moneda - modifică doar simbolul pe care îl utilizează.

10. Fluxul de lucru de traducere

Bine, așa că avem cele două locații configurate și unghiular este cu ușurință de lucru pentru noi din cutie, dar textul este încă în limba engleză. Unghiul nu poate traduce acest lucru automat, din păcate, dar ne poate ajuta cu părți ale fluxului de lucru. Aceasta este ceea ce trebuie să se întâmple:

• Flag Textul static în toate componentele pentru traducere
• Exportați fișierul de traducere care conține acest text static
• Modificați fișierul de traducere și adăugați traducerile relevante
• Mergeți fișierul de traducere tradus înapoi în aplicație

Unghiul ne ajută cu pașii 2 și 4, dar ca dezvoltatori avem nevoie de pasul 1 manual. Pasul 3 ar fi completat de obicei de un profesionist sau o agenție de traducere, folosind software special pentru a citi și actualiza fișierul de traducere.

11. Detaliile axei

Pentru a realiza acest lucru, trebuie să adăugăm un atribut special fiecărui element care conține un text fix care trebuie tradus. Pentru a fi clar dacă conținutul ajunge dintr-un API, atunci nu este un text fix și ar trebui să localizați acest lucru în API. Trebuie doar să adăugați atributul atunci când textul este scris direct în șablonul HTML din codul sursă. Un punct cheie aici este că ar trebui să încercați să păstrați fișierele dvs. TipsCript Locale-Agnostic - cu alte cuvinte, evitați să puneți orice text care trebuie tradus în logica componentei și păstrați-l în șabloane. În caz contrar, instrumentul de extracție nu va putea extrage. Este o practică bună oricum să vă separați preocupările - în viață și în cod.

Să deschidem "App.component.html" și să începem cu titlul "Valoarea curentă". Adăugați pur și simplu atributul "i18n" elementului care conține direct textul.

 și clasa Div = "meta__title" i18n & gt;
     Valoarea curentă
   & lt; / div & gt; 

Este important să înțelegeți că acesta este doar un atribut personalizat "prost". Nu este o directivă unghiulară care declanșează nimic în timpul rulării, de fapt, compilatorul îl îndepărtează după traducere.

Oricum, să vedem ce se întâmplă când rulăm din nou instrumentul de extracție pentru a regenera fișierul de traducere. Amintiți-vă "- fișierul" este doar "mesaje.xlf" acum:

 $ ng xi18n-output-calea locale - dosar
Mesaje.xlf -i18n-locale AR-IQ 

Deschideți fișierul XLF de ieșire și ar trebui să vedeți un nou bloc unitar de traducere care arată așa ceva cu câteva informații suplimentare de context:

 & lt; trans-unitate id = "fata3d45c0f0cd38b726E7798DA15
3E2F8D55551 "Datatype =" HTML "& GT;
    & lt; sursă & gt;
      Valoarea curentă
    & lt; / sursă & gt; 

Mare, înseamnă că instrumentul a luat atributul "i18n". Că ID-ul lung este generat de instrument și va rămâne același cu excepția cazului în care textul se schimbă. Dacă aveți mai multe instanțe de exact același text, toți vor primi același ID. Nu editați acest ID!

Dacă preferați, puteți specifica un ID personalizat în cadrul atributului "I18N". Dacă faceți acest lucru, ID-ul va rămâne același, chiar dacă textul se modifică, deci trebuie să vă asigurați că nu aveți coliziuni de identitate în întreaga aplicație. Utilizați prefixul "@@" pentru a seta un ID personalizat. Aici ID-ul va deveni "Titlu":

 & Lt; Div clasa = "Meta__title" i18n = "@@ titlu" & gt;
     Valoarea curentă
   & lt; / div & gt; 

12. Adăugați un context

Pentru a vă asigura că traducătorul este capabil să ofere o traducere exactă, acestea vor trebui adesea să cunoască contextul în care se utilizează textul. Atributul "i18n" ne permite să definim o descriere și un înțeles pentru a ajuta traducătorul. Formatul este după cum urmează:

 și lt; div i18n = "sensul | descriere @@
personalizat "& gt; text 

Să ne actualizăm titlul cu un înțeles și o descriere:

 & Lt; Div clasa = "Meta__title" i18n = "
Titlu | Valoare în acest moment în TIME @@ Titlu "& GT;
     Valoarea curentă
   & lt; / div & gt; 

Care ar trebui să dea un context suficient de traducător pentru a oferi o traducere exactă. Regenerați fișierul de traducere și ar trebui să vedeți că aceste valori au fost înregistrate. Este demn de remarcat că, dacă nu utilizați un ID personalizat, ID-ul generat ia în considerare semnificația și textul. Deci același text, dar cu un alt sens, va primi un ID diferit. Descrierea, cu toate acestea, nu are niciun impact asupra ID-ului.

13. Text cu variabile

Să trecem la secțiunea Intro. Primul paragraf conține text și o variabilă care va fi interpolată la timpul de execuție. Cum ne ocupăm asta?

Foarte fericit, este destul de simplu. Din nou, trebuie să adăugăm un atribut semnificativ "i18n" elementului care conține. Adăugați-o direct la elementul paragraf:

 & P I18N = "Valoarea de închidere | Valoarea când piața
închis ieri @@ închidere "& gt;
Rulați din nou instrumentul de extracție și veți vedea această nouă unitate de traducere:
  & lt; trans-unitate id = "închidere"
datatype = "html" & gt;
    & lt; sursă & gt; ieri & amp; valoarea de închidere a apos a fost
& lt; x id = "interpolare" echivo-text = "{{
Închidere | Moneda: & APOS; GBP & amp; apos;
}} "/ & gt;. / lt; / sursă & gt; 

A se vedea modul în care interpolarea variabilă a fost detaliată în ieșire. Lucrul frumos despre asta este permite ca traducătorul să modifice structura gramaticală a propoziției, dacă este necesar, fără a sparge legarea. De exemplu, poate exista o limbă în care sentința ar fi cea mai bună scrisă: X valoarea a fost închiderea de ieri, adică cu variabila la început.

14. Pluralizare

Mergând la următorul paragraf veți vedea o sintaxă intimidantă. Acesta este numit format de mesaj ICU și vă permite să specificați diferite bucăți de text pe baza valorii unei variabile.

Puteți utiliza acest lucru pentru a adăuga "S" la cuvintele în limba engleză atunci când valoarea este zero sau nu una. De exemplu, dacă "secunde" este o variabilă care conține numărul de secunde putem folosi această expresie de pluralizare ICU:

 {{secunde}} {secunde, plural, unul
{secundă}, altele {secunde}} 

Ceea ce va ieși:

• 0 secunde
• 1 secunda
• 2 secunde

Nu pare să fie documentată, dar puteți utiliza, de asemenea, "AsyncPipe" în interiorul sintaxei de pluralizare pentru a lucra cu observabile.

În acel exemplu "unul" și "altele" sunt categorii de pluralizare. Există o serie de categorii de a alege, dar feriți-vă! Nu toate localizările suportă toate categoriile, iar unghiulară nu vă spune dacă încercați să utilizați o categorie care nu este acceptată de localizarea actuală. Este ușor să vă gândiți să vă gândiți că ați făcut ceva greșit, deoarece categoria "Două" nu funcționează în localizarea dvs. "EN-GB" și în schimb vă vedeți textul "Alt". În mod inexplicabil "en" (și multe alte limbi comune) doar sprijin doar "unul" și "altul", chiar dacă "zero" și "două" sunt valori explicite.

Verificați acest fișier pentru a vedea ce este de fapt sprijinit.

15. Diagramele de bare radiale multiple

Putem lucra în jurul acestei limitare prin utilizarea numerelor în loc de categorii. Doar prefix valoarea cu un '=':

 acolo {watchers, plural, = 0 {nu este nimeni} = 1
{este o persoană} = 2 {sunt doi oameni}
    Alte {{{watchers}} Oamenii}}
vizionând chiar acum. 

Acest lucru este deja configurat în aplicația demo, trebuie doar să adăugăm atributul "i18n" la paragraful care conține:

 & P I18N = "Watchers | Numărul de persoane
vizionând valoarea @@ watchers "& gt; 

Rulați din nou instrumentul de extracție pentru a vedea cum arată acest lucru. Veți vedea că acest lucru este ușor de ieșire diferit. Acesta va crea două unități de traducere; unul pentru expresia ICU în sine și una care interpolează acea expresie în șirul original.

16. Selectați Expresie

Dacă doriți să afișați textul diferit, în funcție de valoarea unei variabile, puteți utiliza o expresie "Select" ICU care este foarte asemănătoare cu sintaxa "plurală" demonstrată mai sus. În aplicația demo monitorizăm schimbarea aplicată valorii și creați un flux observabil numit "Trend $", care iese "," în jos "sau" stabil "în funcție de faptul dacă schimbarea este pozitivă, negativă sau zero.

Apoi, ne îndreptăm spre expresia "Select" a ICU pentru a ieși un șir diferit în funcție de valoarea fluxului. Aici puteți vedea "AsyncPipe" în uz:

 Valoarea {TREND $ | async, selectați, sus
{a crescut} în jos {scăzut} stabil
    {nu sa schimbat}} 

Aceasta este o sintaxă oarecum mai curată decât utilizarea "ngif" sau "ngswitch" pentru a manipula DOM, plus, de asemenea, joacă frumos cu instrumentul de extracție. Adăugați atributul "i18n" elementului care conține:

 & lt; div clasa = "card__info" i18n = "valoare
Trend | descrie valoarea schimbării valorii Trend @@ Trend "& GT; 

Regenerarea fișierului de traduceri și veți vedea că abordarea este similară cu ieșirea plurală, cu două unități de traducere create. Expresiile ICU sunt destul de la îndemână odată ce vă obișnuiți cu ei, plus le puteți cuiba pentru a crea ieșiri mai complexe.

17. Adăugați traduceri

Un atribut mai "i18n" pentru a adăuga:

 & Lt; div Clasa = "Card__Info" I18N = "Tranzacții
Numărul | Numărul de tranzacții de astăzi @@
Tranzacții "& GT;
     Tranzacții: {{tranzacții $ | Async |
număr }}
   & lt; / div & gt; 

Acum am marcat tot textul care are nevoie de traducere, putem genera ultima oară fișierul de traducere. Odată ce este creat redenumiți-l la "mesaje.ar-iq.xlf" și să înlocuiască incarnarea anterioară. Acesta este fișierul pe care îl vom trimite la profesioniștii de traducere, dar în scopul acestui tutorial, Google Translate va fi în picioare!

Deschideți fișierul XLF și duplicați fiecare "lt; sursă & gt; element, redenumirea ei "și țintă & gt; '. Din păcate, poate fi destul de neplăcută, astfel încât ar putea ajuta la înfrumusețarea conținutului.

Pentru a verifica dacă le avem pe toate, salvați fișierul și începeți aplicația cu localizarea arabă:

 $ ng servi --configuration = ar-iq 

Dacă vedeți mesaje în terminal ca aceasta, ceea ce înseamnă că ați pierdut unul:

 Eroare în XLIFF Parse Errors: Mesaj * ID *
Missează o traducere ("

Sperăm că nu veți avea erori și veți putea vedea aplicația din browser. Nu am adăugat niciun fel de arabă, astfel încât nu va arăta mult diferit.

18. Traducerea Google.

Să începem cu ceva ușor - titlul "valorii actuale". Traducerea Google îmi spune că ar trebui să fie (textul arab aici) să actualizeze astfel valoarea în "țintă și gt; element:

 SOURCE & GT; Valoarea curentă & lt; / sursă & gt;
       & lt; țintă & text arabă aici & lt; / tinta & gt; 

Până acum, bine. Acum, să facem una cu interpolare. Aici este "valoarea de închidere de ieri a fost ..." (sperăm!):

 Target & GT; Textul arab aici & lt; x
id = "interpolare" echivalează textul = "{{închidereValue
| Moneda: & APOS; GBP & amp; apos; }} "/> ;.< ;/target> ;

Utilizați un număr când traduceți astfel încât să puteți vedea unde ar trebui să fie interpolarea. Observați că atunci când vedeți rezultatul tradus în Google Translate, acesta va apărea inversat - adică numărul de la început - dar când copiați și lipiți-l în fișierul de traducere, acesta va reveni la ordinea inițială. Acest lucru se întâmplă deoarece arabul este un limbaj RTL, astfel încât scriptul este (aproape) în întregime oglindit. Traducerea Google face acest lucru prin adăugarea unui atribut "DIR =" RTL "la elementul care conține. Vom învăța cum să facem acest lucru în pasul următor. Restul traducerilor sunt disponibile în filiala Demo Repo, "Tutorial".

19. Direcția Script.

Trebuie să gestionăm direcția scriptului în aplicația noastră, deoarece unghiulul nu va face acest lucru automat pentru noi. De asemenea, nu pare să fie nici o modalitate de a detecta dacă localizarea actuală este o limbă LTR sau RTL, deci va trebui să facem codul hard. Ar fi minunat dacă unghiul a oferit o directivă încorporată pentru acest lucru.

Deschideți "App.Component.ts". Importul "injectați", "locale_id" și "Hostbinding" de la "@ unghiular / core". Apoi, configurați "hostbinding" după cum urmează. Acest lucru va adăuga un atribut "dir" AppComponent și va seta direcția de limbă implicită la "LTR":

 @hostbinding ("attr.dir") dir = 'ltr'; 

Apoi adăugați un constructor și injectați "locale_id". Amintiți-vă că acest lucru este setat de configurația noastră, deoarece folosim AOT.

 Constructor (@inject (locale_id) locale private: șir) {} 

Și, în final, adăugați următorul fragment la metoda existentă "Ngoninit". Aici verificăm dacă "locale_id", adică "ar-iq", începe cu "AR" și dacă schimba direcția la "RTL".

 Dacă (this.locale.startswith ('AR')) {
     the.dir = 'rtl';
} 

Dacă intenționați să sprijiniți mai multe locații, probabil că va trebui să refactorizați acest lucru pentru a face mai scalabil, totuși, deoarece există doar aproximativ zece limbi RTL în uz astăzi Această abordare nu ar trebui să fie prea greu. Porniți aplicația arabă și ar trebui să vedeți acum că UI este oglindit - semnul £ ar trebui să fie în dreapta.

20. Producție

Pasul final este de a genera și de a verifica construcția de producție. În primul rând, trebuie să facem o altă modificare rapidă la configurația "Angular.json".

În "arhitect.build.configurații" duplicarea obiectului de producție existente și redenumiți-l "Producție-AR-IQ". Apoi copiați și lipiți proprietățile din configurația existentă "AR-IQ" în obiect, astfel încât aveți atât opțiunile de producție, cât și opțiunile "i18n".

De asemenea, trebuie să actualizați și "arhitect.serve.configurații". De data aceasta duplicati obiectul "AR-IQ" existent "si redenumi" "Production-AR-IQ" și schimbați valoarea "Browsertarget" pentru a indica noua configurație "Production-AR-IQ".

Acum puteți construi și servi producția dvs. arabă locale cu această comandă:

 $ ng servi --Configuration = producție-ar-iq 

Bine, am terminat! Ne-am internaționalizat cu succes aplicația noastră și am localizat-o pentru publicul "EN-GB" și "AR-IQ". Angularul face ca procesul să fie remarcabil de simplu pentru dezvoltator, de fapt, cel mai greu bit se pare că traducerile ar trebui să fie - scuze pentru orice vorbitori arabi dacă ceva este greșit!

Acest articol a fost publicat inițial în numărul 281 al revistei Creative Web Design Designer Web. Cumpăra problema 281 aici sau Aboneaza-te la designerul web aici .

Articole similare:

• Cum de a construi un site web complet în unghiular
• Cele mai bune laptopuri pentru programare în 2019
• Cum de a construi o aplicație