Többnyelvű támogatás hozzáadása szögletes

Ebben a bemutatóban elviszi Önt az alkalmazásának folyamatában, hogy az alkalmazás hozzáférhető és felhasználóbarát az emberek világszerte. A világ mindössze 20% -a beszél angolul, így más nyelvi lehetőségek biztosítása javíthatja a felhasználói élményét, és nagymértékben növelheti az alkalmazás elérését. Megnézzük a szögletes nemzetközi információs eszközöket, és megmutatjuk, hogyan kell megfelelően használni őket.

Ha helyettesíti a helyszínt, mint egy alkalmazást, győződjön meg róla, hogy jobbra van szerelvényed. Lásd a legjobb útmutatóinkat weboldal építője és felső web hosting többet megtudni.

Létrehoztunk egy nagyon egyszerű demo alkalmazást a folyamat bemutatásához. Klónozzon innen majd kövesse a telepítési utasításokat.

Indítsa el az alkalmazást, hogy megismerje magát vele. Ez csak megjeleníti és frissíti a véletlenszerű számokat és értékeket különböző kontextusokkal, pl. Pénznemek, dátumok stb. A bemutató során használt csövek és jellemzők egy része.

• 17 Tényleg hasznos reagáló tervezési oktatóanyagok

01. A nyelvek támogatására vonatkozó kulcsfontosságú feltételek

Két szó van, amelyeket gyakran használják felcserélhetően, amikor beszélgetnek egy alkalmazásról - nemzetközivé válás és lokalizáció - azonban valójában kissé eltérő dolgokat jelentenek. A nemzetközivé válás az alkalmazás elkészítésének folyamatára utal a különböző nyelvek támogatására. Ezzel ellentétben a lokalizáció az alkalmazás ténylegesen lefordításának folyamatát jelenti a szükséges nyelveken. Alapvetően a nemzetközivé válás az alkalmazásonként egyszer, és a lokalizáció egy-egy helyenként történik - legalábbis ez a terv.

Ezek a kifejezések is lehet ismerős azok rövidített változatai: i18n (ahol a 18 a betűk száma az első „i” és az utolsó „n” nemzetközivé) és L10N (ahol a 10 a betűk száma közötti „i” és a lokalizáció "n").

02. Mi a lokalizáció?

A világ minden táján több mint 6000 nyelv van, amelyek közül a legtöbbet csak az emberek nagyon kis csoportjai használják. Még ha csak akkor is, ha csak az első három nyelvre összpontosítunk - mandarin, spanyol és angolul - jelentős különbségek lesznek a dátumformátum, a nyelvtani szerkezet, a pluralizáció és a szám formázás.

Ha tartalmazzuk az ötödik legszélesebb körben használt nyelvet - arabul - találkozunk egy másik különbséggel; Az arab egy jobb oldali (RTL) szkript, amely azt jelenti, hogy az UI-t tükrözni kell.

Tehát a lokalizáció során figyelembe kell venni a nyelvtant, az elrendezést és a formázási különbségeket, és természetesen meg kell változtatnunk a szöveget is. A szögek segíthetnek ennek nagy részében, de még mindig kell manuálisan lefordítani a szöveget (és menteni a fordítást felhő tároló , így biztonságos és megosztható a csapatával).

03. Helyiségek szögletes

Az egyes helyiségekre kell lokalizálnunk, hogy támogatnunk kell. A helyszín a fent említett megfontolások általános preferenciáira utal, amelyek általában a világ régiójában, jellemzően egy országban vannak megosztva. Minden egyes helyiséget egy Unicode Locale azonosító képviseli, amely meghatározza a nyelvi kódot és a helyszíni kiterjesztést.

A szögletes tartózkodási helyszín "hu-US", amely az "hu" (angol) nyelvkódja az "US" (Amerikai Egyesült Államok) régióban. Az "En-US" számára lokalizált alkalmazást finoman különbözteti meg az "EN-GB" lokalizált alkalmazástól, amely angolul beszélt Nagy-Britanniában. Például az amerikai időpontokban (Becske) formázott MM / DD / YYYY, míg itt az Egyesült Királyságban az érzékenyebb DD / mm / yyyy megközelítést használjuk. Ez a kisebb különbség a megértés jelentős hibát eredményezhet.

Ahhoz, hogy a dolgok érdekes legyenek, lokalizáljuk Demo alkalmazást arabul, ahogy az iraki, aka "Ar-IQ" és angolul beszéltünk az Egyesült Királyságban, aka "EN-GB". Ezt az időt az angol nyelv alapértelmezettként fogjuk használni.

04. A konfiguráció beépítése

Demo projektünket szögletes CLI-vel hozták létre, amely tartalmaz néhány hasznos szerszámot. Ezt a projektet a folyamat előtti (AOT) fordítót fogjuk használni, így szükségünk van a CLI konfigurációs fájljára: "angular.json". Ha csak az in-time (jit) használni szeretné, akkor a dolgokat kissé más módon kell beállítani.

Egy AOT Build segítségével kap egy kis, gyorsabb renderelő készenléti alkalmazás, amely terheli az aszinkron kérések szükségességét, hogy olyan dolgokat, mint a sablonok és stíluslapok. Ennek eredményeképpen létre kell hoznia az egyes helyiségek számára, és a megfelelő építményt az URL-en vagy valamilyen szerveroldali nyelvi felderítés logikájával szolgálja. A legegyszerűbb megközelítés az, hogy hozzon létre egy könyvtárat az egyes helyiségekhez, pl. www.example.com/en-gb és www.example.com/ar-iq. A szakkereskedelem az, hogy nem tudsz váltani a lelkedet, hanem a valóságban, ami valójában nem valószínű, hogy valami szükséges a valódi felhasználók által.

Először is hozzá kell adnunk egy építési konfigurációt az arab helyiségünk számára. A JSON fájlban keresse meg az "építész.build.configurations objektumot. Adja hozzá a következő blokkot a helyi konfiguráció meghatározásához:

 "AR-IQ": {
    "BaseHref": "/ AR-IQ /",
    "Deployurl": "/ AR-IQ /",
    "outputpath": "Dist / Angular-i18n-demo /
ar-iq,
    "I18NFILE": "SRC / LOCALE / MESSTIESS.AR-IQ.
xlf ",
    "I18NFormat": "XLF",
    "I18NLOCALE": "AR-IQ" 

Ez a konfiguráció szögletes, hol adhatja ki az összeállított építményt, és melyik fordítási fájl és formátum használható. Azt is beállítja a helyet, és azt mondja, hogy szögletes, melyik könyvtárat telepítenek.

Mi is módosítanunk kell az "Építész.build.options" alapértelmezett beállításait, hogy az "EN-GB" helyet használja. Állítsa be az alábbi tulajdonságokat az ábrán látható módon. Megjegyzés lehetővé tesszük AOT itt az egész fórumon, így fogják használni termelési és fejlesztési épít:

 "outputpath": "Dist / Angular-i18n-demo /
hu-gb ",
  "I18NLOCALE": "EN-GB",
  "DEPLOYURL": "/ EN-GB /",
  "BaseHref": "/ EN-GB /",
  "AOT": TRUE 

A szög számos helyszínt támogat. Győződjön meg róla, hogy az "I18NLOCALE" tulajdonság megfelelő értékét használja. Láthatja a teljes listát itt .

A jelenetek mögött a fenti konfigurációk egyszerűen betöltenek és olvasnak az egyik ilyen helyi preferencia fájlból.

05. Konfiguráció szolgálata

Az építési kimenet konfigurálása mellett be kell állítanunk az "Ng Serve" parancs konfigurációját is. Ez még egyszerűbb, mivel egyszerűen csak az épített konfigurációt adhatjuk meg. A "angular.json" -ban adja hozzá a következő blokkot az "építész.Serve.configurations" -re:

 "AR-IQ": {
    "Browsertarget": "szögletes-i18n-
Demo: Build: Ar-IQ,
    "Servepat": "/ AR-IQ /"
  } 

Itt az építési konfigurációs beállítások a "Browsertarget" tulajdonság használatával hivatkozunk, és a "SERVEPATH" -et is beállítjuk. Mielőtt az arab alkalmazást szolgálnánk vagy építeni, meg kell teremteni az "I18NFILE" tulajdonságban hivatkozott fordítási fájlt. A szögletes CLI tartalmaz egy eszközt a megjelöltetett szöveg kivonására egy iparág-szabványos fordítási forgalmi fájlba.

Ezeket a fájlokat később részletesebben lefedjük a bemutatóban, de most csak most kell exportálnunk az alapvető, üres fájlt, hogy lehetővé tegyük számunkra, hogy összeállítsunk.

Az "NG XI18N" parancsot a következő opciókkal használjuk. Ez az egyetlen alkalom, amikor tartalmazzuk a Locale-azonosítót a "-Out fájl" fájlnévben:

 $ ng xi18n - output-path locale -out-fájl
üzenetek.ar-iq.xlf --i18n-locale AR-IQ 

Ennek létre kell hoznia egy fájlt egy SRC / Locale könyvtárban. Mostantól mindig az "üzenetek.xlf" nevű fájlt adjuk meg, és manuálisan másolja át a változatra a Névben található helyszíni azonosítóval. Ennek az az oka, hogy megakadályozza az extrakciós eszköz felülírását a fájlhoz hozzáadott meglévő fordítást.

06. Kapcsoló konfiguráció

Ezen a ponton most összeállíthatjuk a projektet, és megnézhetjük, mi történik, de meg kell mondanunk az "NG SERVIC" parancsot, melyik konfigurációt használja. Először nézzük meg az angol változatot. Nem változik itt, mert az angol az alapértelmezett:

 $ ng szolgálja 

Ahogy láthatod, nagyon hasonlít az eredeti verzióra, amely a szögletes "en-US" alapértelmezett helyét használja. A figyelemre méltó különbség a pénznem most megadja nekünk $ -t a $ helyett. Oké, most próbáljuk meg az arab verziót. Állítsa le az angol verziót és futtassa a következőket:

 $ ng Service --Configuration = AR-IQ 

Amint azt várnád, hogy ebben a verzióban nyilvánvalóbb különbségek vannak, különösen a dátum most arab nyelven íródott. A szögek ezt megtehetik, mert néhány dolog, például hónapok és napok nevei egy sor listából származnak, és végül egy ismert számra vonatkoznak. Minden más azonban még mindig angolul van.

07. Locale-tudatos csövek

Vessen egy közelebbről az "app.ponent.html" forráskódját, és látni fogja, hogy számos különböző csövet használunk. A következő szögcsövek a helyi tudás, ami azt jelenti, hogy a jelenlegi helyszínen alapulnak kimenetüket: "dátumpipe", "currencypipe", "decalpipe" és "százaléka".

Ha ezeket a csöveket óvatosan szögletesen fogja kezelni a lokalizációs lombmunkát. Általánosan azt jelenti, hogy a rendelkezésre álló előre meghatározott opciókat bárhol is használhatjuk. Jó példa az US VS UK dátumformázása, amelyet korábban említettünk. Ha az Egyesült Királyságban tartózkodik, és meg szeretné mutatni egy dátumot az (ésszerű) napi hónapos formátum használatával, akkor csalódott lehet, hogy megtalálja az előre definiált "" hányad "opció m / d / yy-ként (pl . 10/9/18), és kísértésbe kerüljön a kívánt formátum kemény kockázata:

 {{mydate | Dátum: 'DD / MM / Y'}} 

De most tudjuk, hogy megkapjuk az M / D / YY formátumot, mert a szögletes az "En-US" helyet alapértelmezés szerint használja. Tehát a formátumot ahelyett, hogy a "" shooddate "opciót használnunk kell, és lokalizáljuk alkalmazást az" EN-GB "használatához.

 {{mydate | Dátum: "Shotdate"}} 

Ez egy kicsit több erőfeszítést igényel, de akkor hozzáadhatunk helyet a szívünk tartalmához, és mindig felhasználóbarát dátumformátummal rendelkezünk.

08. Az előre meghatározott lehetőségek felülbírálása

Sajnos úgy tűnik, hogy nincs könnyű, beépített módja annak, hogy felülbírálja az előre meghatározott formátumot. Például nem lehet csak eldönteni, hogy a dd / mm / y helyett a "" röviddátum "formátumot szeretné, ha a dd / mm / y helyett nem lehet módosítani a formátumot futásidőben. Nem is hozzáadhatja a saját előre definiált lehetőségeket.

Ezen élbetegségekhez létrehozhat egy egyedi dátumcsövet, amely a szögletes "datepipe" -et csomagolja, és minden egyes egyéni formátumot tartalmaz. Bármit, amit nem ismeri fel, a beépített "dátumpipe" -re kerülne.

09. Currencypipe

A polcról A "currencypipe" egy számot formáz, mint amerikai dollár, két tizedesjegyű, és adjon hozzá csoportosulásokat a Locale preferenciáiban meghatározottak szerint.

Észre fogod venni, hogy mindkét helyiségünkben a pénznem mindig dollárban van. Nem varázslatosan kapcsolódik a Sterling (GBP), amikor az "EN-GB" helyet használja. Ennek oka az, hogy a £ 10 nem ugyanaz, mint 10 dollár, így kifejezetten meg kell adnia azt a pénznemet, amiket a számodra utal.

Frissítsük az "app.pponent.html" gombot a GBP használatához. Az árfolyamkód megadásakor a megfelelő értéket kell használnia az ISO 4217 szabványból (lista online).

Módosítsa a két valuta csövet a ":" GBP "hozzáadásával:

 {{érték $ | Async | Pénznem: 'GBP'}} 

És elkezdi látni a £ szimbólumot az US $ helyett.

Ne feledje, hogy nem tesz semmit az okosnak, mintha automatikusan átalakítja az USD-t a GBP-ben lévő egyenértékű értékre, ha megváltoztatja a pénznemet - csak megváltoztatja a használt szimbólumot.

10. Fordítási munkafolyamat

Oké, így van két helyünk konfigurálva, és a szögben segíti a munkát a dobozból a dobozból, de a szöveg még mindig angolul van. A szögletes nem tudja lefordítani ezt automatikusan, szomorúan, de segíthet nekünk a munkafolyamat részeiben. Ez az, amit meg kell történnie:

• Lobogó statikus szöveg minden összetevőjében a fordításhoz
• A statikus szöveget tartalmazó fordítási fájl exportálása
• Módosítsa a fordítási fájlt, és adja hozzá a megfelelő fordításokat
• Egyesítse a fordított fordítási fájlt az alkalmazásba

A szögek segítenek a 2. és 4. lépésekkel, de a fejlesztőknek manuálisan kell az 1. lépést. A 3. lépést tipikusan egy fordítási szakember vagy ügynökség végzi, speciális szoftvert használva a fordítási fájl olvasásához és frissítéséhez.

11. Axis részletei

Ennek eléréséhez további attribútumot kell hozzáadnunk minden olyan elemre, amely rögzített szöveget tartalmaz. Hogy világossá váljon, ha a tartalom megérkezik az API-ből, akkor ez nem rögzített szöveg, és lokalizálnia kell, hogy az API-ban. Csak akkor kell hozzáadnia az attribútumot, ha a szöveg közvetlenül a forráskód HTML-sablonjában található. A lényeg itt az, hogy meg kell törekedni, hogy a géppel fájlokat locale-agnosztikus - más szóval, ne vonjon bármilyen szöveget le kell fordítani az alkatrész logika és tartsa mind a sablonokat. Ellenkező esetben az extrakciós eszköz nem tudja kivonni. Ez jó gyakorlat, hogy elválasztja az aggodalmait - az életben és a kódban.

Nyissuk meg az "App.Component.html" lehetőséget, és kezdjünk el az "aktuális érték" címmel. Egyszerűen adja hozzá az "I18N" attribútumot az elemhez, amely közvetlenül tartalmazza a szöveget.

 & lt; div osztály = "meta__title" i18n & gt;
     Jelenlegi érték
   & lt; / div & gt; 

Fontos megérteni, hogy ez csak egy "buta" egyedi attribútum. Ez nem olyan szöges irányelv, amely bármit is futásidőben, sőt, a fordító eltávolítja a fordítás után.

Mindenesetre nézzük meg, mi történik, ha újra futtatjuk az extrakciós eszközt a fordítási fájl regenerálásához. Ne feledje, hogy a "--out-file" most csak "üzenetek.xlf" van:

 $ ng xi18n - output-path locale -out-fájl
üzenetek.xlf --i18n-locale ar-iq 

Nyissa meg a kimeneti XLF fájlt, és látnia kell egy új fordítási egységblokkot, amely ilyen további összefüggési információkkal néz ki:

 & lt; Trans-Unit ID = "Face3D45C0F0CD38B726E7798DA15
3e2f8d55551 "adattípus =" html "& gt;
    & lt; forrás & gt;
      Jelenlegi érték
    & lt; / forrás és gt; 

Nagyszerű, ez azt jelenti, hogy az eszköz felvette az "I18N" attribútumot. Ez a hosszú azonosítót az eszköz generálja, és ugyanaz marad, hacsak a szöveg nem változik. Ha több példány van pontosan ugyanazon szöveggel, mindannyian ugyanazt az azonosítót kapják. Ne szerkessze ezt az azonosítót!

Ha szeretne, megadhat egy egyedi azonosítót az "I18N" attribútumon belül. Ha ezt megteszi, akkor az azonosító ugyanaz marad, ha a szöveg megváltozik, így biztos kell benne, hogy nincs azonosító ütközése az alkalmazásban. Használja a "@@" előtagot az egyéni azonosító beállításához. Itt az azonosító "cím" lesz:

 & lt; div osztály = "meta__title" i18n = "@@ cím" & gt;
     Jelenlegi érték
   & lt; / div & gt; 

12. Adjon hozzá néhány kontextust

Annak érdekében, hogy a fordító képes pontos fordítást biztosítani, gyakran tudnia kell a szöveget, hogy a szöveget használják. Az "I18N" attribútum lehetővé teszi számunkra, hogy meghatározzunk egy leírást és jelentést, hogy segítsen a fordítónak. A formátum a következő:

 & lt; div i18n = "Jelentés | Leírás @@
customid "& gt; szöveg & lt; / div & gt; 

Frissítsük a címünket jelentése és leírása:

 & lt; div osztály = "meta__title" i18n = "kártya
Cím | Érték ebben a pillanatban időben @@ cím "& gt;
     Jelenlegi érték
   & lt; / div & gt; 

Ez elegendőnek kell lennie a fordítónak, hogy pontos fordítást biztosítson. Regenerálja a fordítási fájlt, és látnia kell, hogy ezek az értékek kimenetek voltak. Érdemes megjegyezni, hogy ha nem használ egy egyéni azonosítót, a generált azonosító figyelembe veszi a jelentést és a szöveget. Tehát ugyanaz a szöveg, de más jelentése, kap egy másik azonosítót. A leírás azonban nem befolyásolja az azonosítót.

13. Szöveg változókkal

Menjünk tovább az Intro részre. Az első bekezdés szöveget és egy változót tartalmaz, amelyet futásidőben interpolálnak. Hogyan kezeljük ezt?

Boldogan nagyon egyszerű. Ismét hozzá kell adnunk egy értelmes "i18n" attribútumot a tartalmú elemnek. Adja hozzá közvetlenül a bekezdés elemhez:

 & lt; p i18n = "záró érték | érték, amikor a piac
tegnap @@ ClosingValue "& gt;
Futtassa újra az extrakciós eszközt, és meg fogja látni ezt az új fordítási egységet:
  & Lt; Trans-Unit ID = "ClosingValue"
adattípus = "html" & gt;
    & lt; forrás & gt; tegnap & amp; s zárási érték volt
& lt; x id = "interpoláció" equiv-text = "{{
ClosingValue | Pénznem: & amp; APOS; GBP & amp; aposz;
}} "/ & gt;. & Source & GT; 

Nézze meg, hogy a változó interpoláció részletes volt a kimenetben. A szép dolog ez az, hogy lehetővé teszi a fordító számára, hogy szükség esetén módosítsa a mondat nyelvtani szerkezetét anélkül, hogy megszakítaná a kötést. Például lehet olyan nyelv, ahol a mondat a legjobban írható: X érték volt a tegnapi záró, azaz a kezdeten végzett változóval.

14. Pluralizáció

A következő bekezdésre való továbblépés néhány megfélemlítő szintaxist fog látni. Ezt ICU üzenetformátumnak nevezik, és lehetővé teszi, hogy különböző szöveges darabokat adjon meg egy változó értéke alapján.

Ezt használhatja, hogy hozzáadja az "S" szót angolul, ha az érték nulla vagy sem. Például, ha a "másodpercek" egy olyan változó, amely a másodpercek számát tartalmazza, használhatjuk ezt az ICU pluralizációs kifejezést:

 {{Second}} {másodperc, többes szám, egy
{Second}, Egyéb {Second}} 

Amely kimen:

• 0 másodperc
• 1 másodperc
• 2 másodperc

Úgy tűnik, hogy nem jelenik meg, de az "Asyncpipe" -t is használhatja a pluralizációs szintaxis belül, hogy megfigyeljen.

Ebben a példában az "egy" és a "más" pluralizációs kategóriák. Számos kategória közül választhat, de vigyázz! Nem minden locales támogatja az összes kategóriát, és a szöglet nem mondja meg, hogy megpróbál-e olyan kategóriát használni, amelyet az aktuális helyiség nem támogat. Könnyű gondolkodni, hogy valami rosszat csináltál, mert a "két" kategória nem működik az "En-GB" helyén, és inkább a "másik" szöveget látja. Megmagyarázhatatlanul "en" (és sok más közös nyelv) csak az "egy" és a "másik" támogatást támogatja, bár a "nulla" és a "két" kifejezett értékek.

Nézze meg ezt a fájlt látni, hogy mi ténylegesen támogatott.

15. A többszörös radiális sávdiagramok

Ezzel a korlátozást a kategóriák helyett számokkal dolgozhatunk. Csak az "=" értékkel jelölje ki:

 Ott {vizsgák, többes szám, = 0 {senki sem} = 1
{egy személy} = 2 {két ember}
    Egyéb {{{watchers}} emberek}}}
most néz. 

Ez már be van állítva a Demo alkalmazásban, csak hozzá kell adnunk az "I18N" attribútumot a tartalmú bekezdéshez:

 & lt; p i18n = "Watchers | Az emberek száma
A @@ Watchers érték megtekintése "& gt; 

Futtassa újra az extrakciós eszközt, hogy megnézze, hogyan néz ki. Látni fogja, hogy ez kissé eltérő. Két fordítási egységet hoz létre; az egyik az ICU kifejezés maga és az, amely interpolálja ezt az expressziót az eredeti karakterláncba.

16. Válassza ki a kifejezést

Ha a változó értékétől függően különböző szöveget szeretne megjeleníteni, akkor a "SELECT" ICU kifejezést használhatja, amely nagyon hasonlít a fent említett "plural" szintaxishoz. A demo app nyomon követjük a változás értékére alkalmazott, és hozzon létre egy megfigyelhető patak úgynevezett „trend $”, amely kimenet „legfeljebb”, „lefelé” vagy a „stabil” attól függően, hogy a változás pozitív, negatív vagy nulla.

Ezután összekapcsoljuk a "SELECT" ICU kifejezést, hogy a stream értékétől függően más karakterláncot adjunk ki. Itt láthatja az "Asyncpipe" használatát:

 Az érték {trend $ | Async, válassza ki, fel
{megnövekedett} le {csökkent} stabil
    {nem változott}} 

Ez egy kissé tisztább szintaxis, mint az "ngif" vagy a "ngswitch" használata a dom manipulálásához, valamint jól játszik az extrakciós eszközzel is. Adja hozzá az "I18N" attribútumot a tartalmú elemhez:

 & lt; div osztály = "kártya__info" i18n = "érték
Trend | Leírja az értékváltozást a trend @@ trend "& gt; 

Regenerálja a fordítói fájlt, és látni fogja, hogy a megközelítés hasonló a többes számhoz, két fordítási egység létrehozásával. Az ICU kifejezések nagyon hasznosak, ha hozzászoksz hozzájuk, plusz, hogy fészkelhessék őket, hogy bonyolultabb kimeneteket hozzanak létre.

17. Fordítások hozzáadása

Egy további "i18n" attribútum hozzáadása:

 & lt; div osztály = "kártya__info" i18n = "tranzakciók
szám | a tranzakciók száma ma @@
tranzakciók "& gt;
     Tranzakciók: {{tranzakciók $ | Async |
szám }}
   & lt; / div & gt; 

Most megjelöltük az összes olyan szöveget, amely át kell fordítania a fordítási fájlt egy utolsó alkalommal. Miután létrejött, átnevezzük azt a "üzenetek.ar-iq.xlf" -re, és cserélje ki az előző inkarnációt. Ez az a fájl, amelyet a fordítási szakembernek küldünk, de e bemutató célja, a Google Fordító állni fog!

Nyissa meg az XLF fájlt és másoljon minden "& lt; forrás és gt;" Elem, átnevezve '& lt; cél & gt; Sajnos meglehetősen rendetlen lehet, így segíthet a tartalmak szépítésében.

Annak ellenőrzéséhez, hogy megvan az összes, mentse a fájlt, és indítsa el az alkalmazást az arab helyszínen:

 $ ng Service --Configuration = AR-IQ 

Ha bármilyen üzenetet lát az ilyen terminálban, ami azt jelenti, hogy hiányzott az egyik:

 Hiba az XLIFF parse hibákban: Üzenet * ID *
hiányzik a fordítás ("

Remélhetőleg nem lesz hibás, és láthatja az alkalmazást a böngészőben. Még nem adtunk hozzá semmilyen tényleges arabot, így nem fog sok másra nézni.

18. Google Translate

Kezdjük valami egyszerűen - az "aktuális érték" címet. A Google Fordító azt mondja nekem, hogy (arab szöveg itt), így frissítse az értéket a "& lt; cél & gt;" elem:

 & lt; forrás & gt; aktuális érték & lt; / forrás és gt;
       & lt; cél & gt; arab szöveg itt & lt; / target & gt; 

Eddig jó. Most tegyünk egyet az interpolációval. Itt van a "tegnap záró értéke ..." (remélhetőleg!):

 & lt; cél & gt; arab szöveg itt & lt; x
ID = "Interpoláció" equiv-text = "{{bezáróvalue
| Pénznem: & amp; APOS; GBP & amp; aposz; }} "/>.< ,/target>

Használjon számot, ha lefordítja, hogy láthatja, hol kell az interpoláció. Figyeljük meg, hogy amikor megjelenik a lefordított eredményt Google Translate ez fordítva jelenik meg - vagyis a szám elején - de ha másolja és illessze be a fordítási fájl akkor visszatér az eredeti sorrendben. Ez történik, mert az arab egy RTL nyelv, így a szkript (szinte) teljesen tükrözi. A Google Translate ezt úgy tette hozzá, hogy hozzáad egy "dir =" rtl "attribútumot a tartalmú elemhez. Megtanuljuk, hogyan kell ezt tenni a következő lépésben. A többi fordítás elérhető a Demo Repo, a "Tutorial" ágban.

19. Szkript iránya

A szkript irányt kell kezelnünk az alkalmazásunkban, mert a szögletes nem fogja automatikusan ezt követni. Úgy tűnik, hogy bármilyen módja annak, hogy észleljen, ha az aktuális helyszín LTR vagy RTL nyelv, ezért ezt meg kell vetnünk. Nagyszerű lenne, ha szögletes felajánlott egy beépített irányelvet erre.

Nyissa meg az "app.ponsonent.ss" -t. Importáljon "injekció", "locale_id" és "hostbinding" a '' @ szögletes / mag ''. Ezután állítsa be a "hostbinding" -t az alábbiak szerint. Ez hozzáad egy "dir" attribútumot az AppComponent-hez, és beállítja az alapértelmezett nyelvi irányt az "LTR" -re:

 @Hostbinding ('attr.dir') dir = 'ltr'; 

Ezután adjunk hozzá egy konstruktorot, és adjunk be a "Locale_id" -t. Ne feledje, hogy ezt a konfigurációnk állítja be, mert az AOT-t használjuk.

 Constructor (@Inect (locale_id) Private Locale: String) {} 

És végül adja hozzá a következő részleteket a meglévő "ngoninit" módszerhez. Itt vagyunk ellenőrizni, hogy a „LOCALE_ID”, azaz az „ar-IQ”, kezdődik az „ar”, és ha ez nem a változás irányát, hogy „rtl” helyett.

 Ha (ez.Locale.startswith ('Ar')) {
     this.dir = 'rtl';
} 

Ha több helyszíneket szeretne támogatni, akkor valószínűleg vissza kell adnod ezt, hogy skálázhatóbbá tegyük, mivel csak a mai napig csak tíz RTL nyelvre van szükség, ez a megközelítés nem lehet túlságosan nehézkes. Indítsa el az arab alkalmazást, és most látni kell, hogy az UI tükröződik - a £ jelnek jobbra kell lennie.

20. Gyártás

Az utolsó lépés az, hogy előállítsuk és ellenőrizzük a termelésünket. Először is, bár szükségünk van egy gyors módosításra a "szöglet.json" konfigurációra.

Az "építész.build.configurációk" duplikálja a meglévő gyártási objektumot, és nevezze át a "termelés-Ar-IQ" -t. Ezután másolja be és illessze be a meglévő "AR-IQ" konfigurációját az objektumba, így mind a termelési opciók, mind az "I18N" opciók vannak.

Önnek is frissítenie kell az "Építész.Serve.Configurációk" is. Ezúttal megismétli a meglévő "AR-IQ" objektumot, és nevezze át a "" termelés-ar-iq "-t, és módosítsa a" Browsertarget "értéket az új" termelési-ar-iq "konfigurációra.

Most már megépíthet és szolgálhat a termelési arab helyiséggel ezzel a paranccsal:

 $ ng Service --Configuration = gyártás-AR-IQ 

Oké, végeztünk! Sikeresen nemzetközi voltunk alkalmazásunk, és lokalizálta az "EN-GB" és az "AR-IQ" közönség számára. Szög teszi a folyamat rendkívül egyszerű a fejlesztő számára, sőt, a legnehezebb bit kitalálni, mi a fordítás legyen - elnézést mindenkitől, arab nyelvű, ha valami baj van!

Ez a cikk eredetileg megjelent a szóban forgó 281 kreatív web design magazin Web Designer. Vásároljon 281 kérdést vagy Iratkozzon fel itt a webdesignerre .

Kapcsolódó cikkek:

• Hogyan építsünk egy teljes oldalú weboldalt szögben
• A legjobb laptopok a programozáshoz 2019-ben
• Hogyan építsünk egy alkalmazást