Lisää monikielinen tuki kulmiksi

Tässä opetusohjelmassa aiomme viedä sinut prosessin tekemiseen, jotta sovelluksesi on saatavilla ja käyttäjäystävällinen ihmisille ympäri maailmaa. Vain noin 20 prosenttia maailmasta puhuu englantia, joten muiden kielivaihtoehtojen tarjoaminen voi parantaa käyttökokemustasi ja lisätä suuresti sovelluksen ulottuvuuksia. Aiomme tarkastella kulmanrakennettua kansainvälistymistyökaluja ja näytämme, kuinka voit käyttää niitä oikein.

Jos rakennat sivuston sijasta sovelluksen, varmista, että sinulla on työkalu oikealle. Katso oppaat parhaiten Verkkosivuston rakentaja ja ylhäällä sivujen ylläpito Lue lisää.

Olemme luoneet hyvin yksinkertaisen demo-sovelluksen prosessin osoittamiseksi. Klooni täältä Ja noudata sitten asennusohjeita.

Aloita sovellus tutustumaan siihen. Se vain näyttää ja päivittää satunnaisia ​​numeroita ja arvoja eri konteksteilla, esim. Valuutat, päivämäärät jne. Pidämme joitain opetusohjelman aikana käytettyjä putkia ja ominaisuuksia.

• 17 Todella hyödyllinen reagoiva suunnittelu opetusohjelmat

01. Kielten tukemiseen liittyvät keskeiset ehdot

On olemassa kaksi sanaa, joita käytetään usein vuorovaikutteisesti puhuessaan sovelluksen kääntämisestä - kansainvälistyminen ja lokalisointi - ne todella merkitsevät hieman erilaisia ​​asioita. Kansainvälistyminen viittaa sovelluksen valmistelemiseen eri kielten tukemiseen. Sitä vastoin lokalisointi viittaa sovelluksen tosiasiallisesti kääntämällä tarvittavat kielet. Pohjimmiltaan kansainvälistyminen on jotain, mitä teet kerran sovellusta kohden, ja lokalisointi tapahtuu kerran paikassa - ainakin suunnitelma.

Nämä ehdot voivat myös olla tuttuja lyhennettyihin versioihin: I18N (jossa 18 on kirjainten lukumäärä ensimmäisen "I": n ja kansainvälistymisen viimeisen "n" välillä) ja L10N (jossa 10 on kirjainten lukumäärä "I" ja "n" lokalisoinnin).

02. Mikä on lokalisointi?

Maailmassa on yli 6 000 kieltä, joista suurin osa käyttää vain hyvin pieniä ihmisiä. Kuitenkin, vaikka keskitymme vain kolmella kolmella kielellä - mandariini, espanja ja englanti - on merkittäviä eroja päivämäärän muotoilussa, kieliopillisessa rakenteessa, moniarvonaalisessa ja numeron muotoilussa.

Jos me sisällytämme viidennen laajimman käytetyn kielen - arabia - kohtaamme toisen eron; Arabia on oikeanpuoleinen (RTL) käsikirjoitus, joka tarkoittaa, että UI on myös peilata.

Joten lokalisoinnin aikana meidän on tarkasteltava kielioppia, ulkoasua ja muotoilua eroja ja tietenkin meidän on myös muutettava itse teksti. Kulma voi auttaa paljon tästä, mutta sinun on vielä valittava manuaalisesti teksti (ja tallenna käännös sisään pilvivarasto , joten se on turvallinen ja jakattava tiimisi kanssa).

03. Locales kulma

Meidän on paikannus jokaiselle paikalliselle, jota meidän on tuettava. Locale viittaa yleisiin mieltymyksiin edellä mainittujen näkökohtien osalta, jotka yleensä jaetaan maailman alueella, tyypillisesti maa. Jokainen paikka on edustaa Unicode-locale-tunniste, joka määrittää kielikoodin ja paikallisen laajennuksen.

Kulmakoneen oletusyksikkö on "en-US", joka on kielikoodi "en" (englanti), kuten puhutaan alueella "US" (Yhdysvallat). App, joka sijaitsee "En-US", joka eroaa hienovaraisesti "en-GB: n", joka on englanti, joka on puhuttu Isossa-Britanniassa. Esimerkiksi Yhdysvaltain päivämäärissä on (bafflingly) muotoiltu MM / DD / YYYY, kun taas tässä Yhdistyneessä kuningaskunnassa käytämme järkevämpää DD / mm / YYYY-lähestymistapaa. Tämä alaikäinen ero voi johtaa merkittävään virheeseen ymmärtämisessä.

Tee mielenkiintoista, kun loistamme demo-sovelluksemme arabialaiseksi, kuten Irakissa, AKA 'AR-IQ' ja Englanti puhutaan Yhdistyneessä kuningaskunnassa, eli 'en-gb'. Käytämme englantia oletusarvona tällä kertaa.

04. Rakenna kokoonpano

Demo-projekti luotiin Kulma CLI: n avulla, joka sisältää hyödyllisen työkalun. Käytämme tämän projektin edelläkävijä (AOT) kääntäjä, joten meidän on tehtävä muutoksia CLI: n kokoonpanotiedostoon: "Angular.json". Jos haluat käyttää vain-aikataulua (JIT), sinun on määritettävä asioita hieman eri tavalla.

Aotin rakentamalla saat pienen, nopeamman renderöinnin valmiina sovelluksen, joka kuormittaa ilman asynkronisia pyyntöjä etsimään asioita, kuten malleja ja tyylitaulut. Tämän seurauksena sinun on luotava rakennus jokaiselle paikalliselle paikalle ja palvella sopivaa rakentaa URL-osoitteen tai jonkinlaisen palvelinpuolen kielen tunnistuslogiikan avulla. Yksinkertaisin lähestymistapa on luoda hakemisto jokaiselle paikalliselle, esim. www.example.com/fi-gb ja www.example.com/ar-q. Kauppa on, että et voi vaihtaa kieltä päälle-lentää, vaan todellisuudessa, joka ei todennäköisesti ole todellisten käyttäjien vaatimaa.

Ensinnäkin meidän on lisättävä rakennuskokoonpano arabialaiselle paikalle. JSON-tiedostossa etsiä arkkitehti.build.configurations '-objekti. Lisää seuraava lohko määrittääksesi kokoonpanon paikan päällä:

 "Ar-IQ": {
    "BaseHref": "/ Ar-IQ /",
    "Deployurl": "/ ar-iq /",
    "Lähtöaste": "Dist / ancular-I18N-demo /
Ar-IQ ",
    "I18nfile": "SRC / Locale / Viestit.ar-IQ.
XLF ",
    "I18Nformat": "XLF",
    "I18nlocale": "Ar-IQ" 

Tämä konfiguraatio kertoo kulma, johon koottu rakennetaan ja mitkä käännökset tiedosto ja käytettävä muoto. Se asettaa myös paikkansa ja kertoo kulmakulmasta, mitä hakemistoa sovellus on käytössä.

Meidän on myös muutettava "architect.build.options" oletusasetukset "käyttämään" en-GB "-paikkaa. Aseta seuraavat ominaisuudet kuvan mukaisesti. Huomaa, että aiomme ottaa käyttöön täältä laudalle niin, että sitä käytetään tuotantoon ja kehitykseen:

 "Lähtöaste": "Dist / ancular-I18N-demo /
en-gb ",
  "I18nlocale": "en-gb",
  "Deployurl": "/ en-GB /",
  "BaseHref": "/ en-GB /",
  "AOT": TRUE 

Kulma tukee useita paikallisia. Varmista, että käytät oikeaa arvoa I18Nlocale '-ominaisuudelle. Näet täydellisen luettelon tässä .

Kulissien takana edellä mainitut kokoonpanot yksinkertaisesti lataamalla ja lue yhdestä näistä pacale-etuustiedostoista.

05. Tarjoa kokoonpano

Rakennustuloksen määrittämisen lisäksi meidän on myös perustettava kokoonpano "NG Serve" -komennolle kehitykselle. Tämä on yksinkertaisempi, koska voimme vain viitata rakennuksen kokoonpanon, jonka juuri lisätään. "Angular.json" Lisää seuraava lohko architect.serve.configurations ":

 "Ar-IQ": {
    "Browsertarget": "Kulma-I18N-
DEMO: Rakenna: Ar-IQ ",
    "Servepath": "/ ar-iq /"
  } 

Täällä viitataan rakentamisen konfigurointivaihtoehtoja käyttämällä "Browsertarget" -ominaisuutta ja asetamme myös "ServePath". Ennen kuin voimme joko palvella tai rakentaa arabialaista sovellusta, meidän on luotava käännöstiedosto, joka on viitattu edellä "I18nfile" ominaisuus. Kulma CLI sisältää työkalun lipun alla olevan tekstin poistamiseksi alan standardin käännöslähdetiedostoon.

Me kattaamme nämä tiedostot tarkemmin myöhemmin opetusohjelmassa, mutta nyt meidän on vain vienyt perusasetus, tyhjä tiedosto, jotta voimme koota.

Käytämme NG XI18N -komentoa seuraavilla vaihtoehdolla. Tämä on ainoa kerta, kun siihen sisällytetään sijainti-tiedosto "-tiedosto" FILENAME:

 $ ng Xi18n --Output-polku LOCALEOUT-tiedosto
Viestit.ar-iq.xlf - 18n-locale ar-iq 

Tämän pitäisi luoda tiedosto SRC / Locale-hakemistoon. Tästä lähtien lähetämme aina viestit nimeltä "Viestit.xlf" ja kopioi se manuaalisesti versioon, jossa on oikealla paikallinen tunnus. Syynä tähän on estää uuttotyökalu korvaamasta kaikki olemassa olevat käännökset, jotka olemme lisänneet tiedostoon.

06. Vaihda kokoonpano

Tässä vaiheessa voimme nyt laatia projektin ja nähdä, mitä tapahtuu, mutta meidän on kerrottava "NG Serve" -komento, joka kokoonpano käyttää. Katsotaan ensin englanninkielistä versiota. Ei muutoksia täällä, koska englanti on oletusarvo:

 $ ng palvelevat 

Kuten näet, se näyttää paljon alkuperäisestä versiosta, joka käyttää kulmamallikaa "En-US". Merkittävä ero on valuutta nyt määrittää meille $ vain $. Okei, nyt kokeile arabialaista versiota. Pysäytä englanninkielinen versio ja suorita:

 $ NG Serve --Configuration = Ar-IQ 

Koska odotat, että tässä versiossa on ilmeisiä eroja, erityisesti päivämäärä on nyt kirjoitettu arabiaksi. Kulma voi tehdä tämän, koska joidenkin asioiden, kuten kuukausien ja päivinä, ovat asetetusta luettelosta ja viime kädessä ne liittyvät tunnetulle numerolle. Kaikki muu on kuitenkin edelleen englanniksi.

07. Locale-Aware-putket

Katso tarkemmin "App.component.html" lähdekoodi ja näet, että käytämme useita eri putkia. Seuraavat kulmaputket ovat paikallinen - tietoinen, mikä merkitsee sitä, että ne sopeuttavat tuotantoaan nykyisen sijaintia: "DatePipe", "DECIMALPIPE", "Decimalpipe" ja "PERCENTPIPE".

Jos käytät näitä putkia huolellisesti kulma, käsittelee paljon lokalisointijalkaa sinua varten. Tarkka tarkastamalla käytettävissä olevia ennalta määritettyjä vaihtoehtoja missä voit. Hyvä esimerkki on Yhdysvaltain vs. Yhdistyneen kuningaskunnan muotoilu, jonka mainitsimme aiemmin. Jos olet Yhdistyneessä kuningaskunnassa ja haluat näyttää päivämäärän käyttäen (järkevää) päivittäisen kuukauden vuoden muodossa, saatat olla turhautunut havaitsemaan, että ennalta määritelty "" lyhyt "-vaihtoehto tekee m / d / yy (esim 10/9/18) ja olla houkutellut kovaa kovaa haluamasi muodon näin:

 {{mydate | Päivämäärä: "DD / mm / y '}} 

Mutta me nyt tiedämme, että saamme m / d / yy-muodon, koska kulma käyttää oletusarvoisesti "en-US" -paikkaa. Joten sen sijaan, että koodataan muotoa, meidän pitäisi käyttää "lyhythahmo" -vaihtoehto ja lokalisoida sovelluksemme käyttää "en-GB".

 {{mydate | Päivämäärä: "Shortdate"}} 

Se vie pieniä hieman vaivaa, mutta voimme lisätä paikallisia sydämemme sisältöömme ja sinulla on aina käyttäjäystävällinen päivämäärä.

08. Ennalta määritettyjen vaihtoehtojen ylittäminen

Valitettavasti ei näytä siltä, ​​että on helppo, sisäänrakennettu tapa ohittaa ennalta määritetty muoto. Esimerkiksi et voi vain päättää, että haluaisit olla "lyhyt" -formaatti DD / mm / vvv: n sijasta DD / mm / y, koska ei ole keinoa muokata muotoa Runtime. Et myöskään voi lisätä omia ennalta määritettyjä vaihtoehtoja.

Näihin reunakohteisiin voit luoda mukautetun päiväretken putken, joka kiertää kulman "DatePipe" ja käsittelee kaikki mukautetut formaattit paikallinen. Kaikki, mitä se ei tunnista, siirretään sisäänrakennetulle 'DatePipe'.

09. Curcencenceypipe

Pois hylly "Curcencenceypipe" muodostaa numeron Yhdysvaltain dollareina, leikkaa kaksi desimaalipaikasta ja lisää ryhmittymiä, jotka on määritelty paikallisten mieltymyksissä.

Huomaat, että molemmissa paikallisissa valuutta on aina Yhdysvaltain dollareissa. Se ei siirry maagisesti Sterlingiin (GBP), kun käytät "en-GB" -paikkaa. Syy tähän on, että £ 10 ei ole sama kuin 10 dollaria, joten sinun on nimenomaisesti määritettävä valuutta, jonka numero viittaa.

Päivitä 'app.component.html' käyttämään GBP kaikkialla. Kun määrität valuuttakoodin, sinun on käytettävä oikeaa arvoa ISO 4217 -standardista (luettelo saatavilla verkossa).

Muokkaa kahta valuuttaputkea lisäämällä ":" GBP ", kuten niin:

 {{arvo $ | Async | Valuutta: "GBP '}} 

Ja aloitat nähdä £ symbolin Yhdysvaltain dollarin sijasta.

Muista, että ei tee mitään fiksu, kuten Muunna automaattisesti USD: n vastaavaan arvoon GBP: ssä, jos muutat valuutta - se vain muuttaa sitä symbolia.

10. Käännöstyökulma

Okei, joten meillä on kaksi paikallista konfiguroitu ja kulma on hyödyllistä tehdä joitakin töitä meille ulos laatikosta, mutta teksti on kaikki vielä englanniksi. Kulma ei voi kääntää tätä automaattisesti, valitettavasti, mutta se voi auttaa meitä työnkulun osissa. Tämä on mitä tapahtuu:

• Flag Staattinen teksti kaikissa käännöksessä
• Vie käännöstiedosto, joka sisältää tämän staattisen tekstin
• Muokkaa käännöstiedostoa ja lisää asiaankuuluvat käännökset
• Merge käännetty käännöstiedosto takaisin sovellukseen

Kulma auttaa meitä vaiheissa 2 ja 4, mutta kehittäjinä tarvitsemme vaiheessa 1 manuaalisesti. Vaihe 3 Täytyy tyypillisesti käännös ammattihenkilö tai virasto, jossa käytetään erityisiä ohjelmistoja käännöstiedoston lukemiseen ja päivittämiseen.

11. AXIS-tiedot

Tämän saavuttamiseksi meidän on lisättävä erityinen attribuutti jokaiseen elementtiin, joka sisältää kiinteää tekstiä käännettäväksi. Jos haluat olla selväksi, onko sisältö saapuu API: stä, niin se ei ole kiinteä teksti ja sinun on paikantaa, että API: ssä. Sinun tarvitsee vain lisätä attribuutti, kun teksti on kirjoitettu suoraan HTML-malliin lähdekoodissasi. Tärkeintä tässä on, että sinun pitäisi yrittää pitää tilaustiedostot Locale-Agnostikko - toisin sanoen välttää minkä tahansa tekstin, joka on käännettävä komponenttilogiikkaan ja pitää kaikki malleissa. Muussa tapauksessa uuttotyökalu ei pysty poistamaan sitä. Se on kuitenkin hyvä käytäntö erottaa huolesi - elämässä ja koodissa.

Avaa 'app.component.html' ja aloita nykyisen arvon otsikko. Lisää vain "I18n" -määrityksen elementtiin, joka sisältää suoraan tekstin.

 & lt; div luokka = "Meta__Title" I18n & gt;
     Nykyinen arvo
   & lt; / div & gt; 

On tärkeää ymmärtää, että tämä on vain "tyhmä" mukautettu attribuutti. Se ei ole kulma-direktiivi, joka laukaisee mitään Runtime, itse asiassa kääntäjä poistaa sen käännösten jälkeen.

Joka tapauksessa, katsotaan, mitä tapahtuu, kun suoritat uuttotyökalun uudelleen käännöstiedoston uudistamiseksi. Muista "--Out-tiedosto" on vain "viestejä.xlf" nyt:

 $ ng Xi18n --Output-polku LOCALEOUT-tiedosto
Viestit.xlf --I18n-locale ar-iq 

Avaa tulostus XLF-tiedosto ja sinun pitäisi nähdä uusi käännösyksikön lohko, joka näyttää jotain tällaista lisätietoa:

 & lt; trans-yksikön tunnus = "face3d45c0f0cd38b726e7798da15
3E2F8D55551 "DataType =" HTML "& GT;
    & lt; lähde & gt;
      Nykyinen arvo
    & lt; / lähde & gt; 

Suuri, se tarkoittaa, että työkalu nousi "I18n" -määrityksen. Tämä pitkä tunnus syntyy työkalulla ja pysyy samana, ellei tekstin muutoksia. Jos sinulla on useita tapauksia täsmälleen samaa tekstiä, he kaikki saavat saman tunnuksen. Älä muokkaa tätä tunnusta!

Jos haluat, voit määrittää mukautetun tunnuksen I18N-määritteessä. Jos teet tämän, tunnus pysyy samana, vaikka teksti muuttuu, joten sinun on oltava varma, että sinulla ei ole mitään ID-törmäyksiä koko sovelluksessasi. Voit asettaa mukautetun tunnuksen "@@" -luokituksen avulla. Täällä tunnus tulee "otsikko":

 & lt; div luokka = "Meta__title" i18n = "@@ otsikko" & gt;
     Nykyinen arvo
   & lt; / div & gt; 

12. Lisää asiayhteys

Jotta kääntäjä pystyy toimittamaan tarkan käännöksen, heidän on usein tiedettävä asiayhteys, jonka mukaan tekstiä käytetään. Muoto on seuraava:

 & lt; div i18n = "merkitys | Kuvaus @@
Customod "& gt; teksti & lt; / div & gt; 

Päivitä otsikko ja kuvaus:

 & lt; div luokka = "Meta__Title" i18n = "kortti
Otsikko | Arvo tällä hetkellä @@ Otsikko "& GT;
     Nykyinen arvo
   & lt; / div & gt; 

Tämän pitäisi antaa kääntäjä tarpeeksi kontekstia tarkan käännöksen aikaansaamiseksi. Regeneroi käännöstiedostoa ja sinun pitäisi nähdä nämä arvot on tuotettu. On syytä huomata, että jos et käytä mukautettua tunnusta, luotu tunnus on merkitys ja teksti huomioon. Joten sama teksti, mutta eri merkitys, saa toisen tunnuksen. Kuvaus ei kuitenkaan vaikuta ID: hen.

13. Teksti muuttujien kanssa

Siirrymme Intro-osaan. Ensimmäisessä kappaleessa on tekstiä ja muuttujaa, jotka interpoloidaan vuorotellen. Miten käsittelemme tätä?

Hyvin onnellisesti se on melko suoraviivainen. Jälleen meidän on lisättävä merkityksellinen "I18n" attribuutti sisältävään elementtiin. Lisää se suoraan kappaleeseen:

 & lt; p I18n = "Sulkemisarvo | Arvo markkinoilla
suljettu eilen @@ closingvalue "& gt;
Suorita uuttotyökalu uudelleen ja näet tämän uuden käännösyksikön:
  & lt; trans-yksikön tunnus = "ClosingValue"
datatyyppi = "HTML" & GT;
    & lt; lähde & gt; eilen & amp; APOS; S-sulkuarvo oli
& lt; x id = "interpolointi" equiv-teksti = "{{
ClosingValuue | Valuutta: & amp; APOS; GBP & amp; APOS;
}} "/ & gt;. & lt; / lähde & gt; 

Katso, miten muuttuva interpolointi on kuvattu tuotannossa. Nizzan asia tästä on se sallii kääntäjän muuttaa virkkeen kieliopillista rakennetta tarvittaessa rikkomatta sitoutumista. Esimerkiksi voi olla kieli, jossa lause olisi paras kirjoitettu: X-arvo oli eilinen sulkeminen eli muuttujalla alussa.

14. Pluralisaatio

Siirtyminen seuraavaan kohtaan näet jotain pelottavan syntaksin. Tätä kutsutaan icu-viestin muotoon ja sen avulla voit määrittää eri tekstiä muuttujan arvon perusteella.

Voit käyttää tätä lisäämällä sanat englanniksi, kun arvo on nolla tai ei. Esimerkiksi jos "sekunnit" on muuttuja, joka sisältää sekuntien määrää, voimme käyttää tätä ICU: n moniarvoisuutta ilmaisua:

 {{sekuntia}} {sekuntia, monikko, yksi
{toinen}, muut {sekuntia}} 

Joka tuotetaan:

• 0 sekuntia
• 1 sekunti
• 2 sekuntia

Se ei näytä olevan dokumentoitu, mutta voit myös käyttää "asyncpipe" moniarvoisen syntaksin sisällä toimimaan havaintojen kanssa.

Tässä esimerkissä "yksi" ja "muut" ovat moniarvoisuutta. On olemassa useita luokkia, mutta varokaa! Kaikki paikalliset eivät tue kaikkia kategorioita, ja kulma ei kerro, jos yrität käyttää luokkaa, jota nykyinen sijainti ei tue. On helppoa päätyä ajatteluun, että olet tehnyt jotain väärin, koska "kaksi" -luokka ei toimi "EN-GB" -paikassa ja sen sijaan näet "muut" tekstit. Esitieteellisesti "en" (ja monet muut yhteiset kielet) tukevat vain "yksi" ja "muut", vaikka "nolla" ja "kaksi" ovat nimenomaisia ​​arvoja.

Tutustu tähän tiedostoon nähdä, mitä todella kannattaa.

15. Useita säteittäisiä viivakaavioita

Voimme työskennellä tämän rajoituksen ympärillä käyttämällä numeroja luokkien sijaan. Vain etuliite arvo arvolla '=':

 Siellä {tarkkailijat, monikko, = 0 {ei kukaan} = 1
{on yksi henkilö} = 2 {ovat kaksi ihmistä}
    muut {ovat {{tarkkailijat}} ihmiset}}
katsomassa juuri nyt. 

Tämä on jo perustettu demo-sovelluksessa, meidän on vain lisättävä "I18n" -määrityksen sisältävän kappaleen:

 & lt; p I18n = "tarkkailijat | ihmisten määrä
katsomassa arvo @@ Watchers "& GT; 

Suorita uuttotyökalu uudelleen nähdäksesi, miten tämä näyttää. Näet, että tämä tuotetaan hieman eri tavalla. Se luo kaksi käännösyksikköä; Yksi ICU-ilmaisu itse ja se, joka interpoloi että lauseke alkuperäiseen merkkijonoon.

16. Valitse ilmaisu

Jos haluat näyttää eri tekstin riippuen muuttujan arvosta, voit käyttää "Valitse" ICU-ilme, joka on hyvin samanlainen kuin edellä mainittu "monikko" syntaksi. Demo-sovelluksessamme valvomme arvoa ja luomaan havaittavan virran nimeltä "trendi $", joka tuottaa "ylös", "alas" tai "vakaa" riippuen siitä, onko muutos positiivinen, negatiivinen tai nolla.

Sitten kiinnitämme "Valitse" ICU-lauseke, jos haluat tuottaa toisen merkkijonon riippuen stream-arvosta. Täällä voit nähdä 'asyncpipe' käytössä:

 Arvo {trend $ | Async, valitse, ylös
{Lisääntynyt} alas {vähentynyt} vakaa
    {Ei muuttanut}} 

Tämä on jonkin verran puhtaampaa syntaksi kuin "Ngif" tai "ngswitch" käyttäminen DOM: n manipuloimiseksi sekä se toimii myös hienosti uuttotyökalun kanssa. Lisää "I18n" -määrityksen sisältävään elementtiin:

 & lt; div luokka = "Card__Info" i18n = "arvo
Trend | kuvaa arvonvaihtoa trend @@ trend "& gt; 

Regeneroi käännökset tiedosto ja näet lähestymistavan samanlainen kuin monikon tulos, jossa on kaksi käännösyksikköä. ICU: n ilmaisut ovat melko käteviä, kun olet tottunut niihin, ja voit pesä heidät luomaan monimutkaisempia tuotoksia.

17. Lisää käännökset

Yksi "I18n" attribuutti lisää:

 & lt; div luokka = "Card__Info" I18N = "Transactions
Laske | TOIMINNOT Nykyään @@
Transactions "& gt;
     Transactions: {{Transactions $ | Async |
numero}}
   & lt; / div & gt; 

Nyt olemme merkinneet kaiken tekstin, joka tarvitsee kääntämällä, voimme luoda käännöstiedoston viime kerralla. Kun se on luotu nimetä se "viestien.ar-iq.xlf" ja vaihda edellinen inkarnaatio. Tämä on tiedosto lähetettäväksi käännös ammattihenkilölle, mutta tämän opetusohjelman tarkoituksiin Google kääntää seisoo!

Avaa XLF-tiedosto ja kaksinkertainen jokainen "& lt; lähde & gt; elementti, nimeä se "& lt; kohde & gt;". Valitettavasti se voi olla melko epämääräinen, joten se voi auttaa sisältöä sisältöä.

Tarkista, että meillä on kaikki, tallenna tiedosto ja käynnistä sovellus arabialaisella paikallisella paikalla:

 $ NG Serve --Configuration = Ar-IQ 

Jos näet viestejä terminaalissa näin, mikä tarkoittaa, että olet unohtanut yksi:

 Virhe XLIFF Parse -virheissä: Viesti * ID *
Siirrä käännös ("

Toivottavasti sinulla ei ole virheitä ja voit nähdä sovelluksen selaimessa. Emme ole lisänneet mitään todellista arabiaa, joten se ei näytä erilaisilta.

18. Google Käännä

Aloitetaan jotain helppoa - "nykyinen arvo". Google Translate kertoo minulle, että sen pitäisi olla (arabialainen teksti täällä), joten päivitä arvo "& lt; tavoite & gt; Elementti:

 & lt; lähde & gt; nykyinen arvo & lt; / lähde & gt;
       & lt; kohde & gt; arabialainen teksti täällä & lt; / tavoite & gt; 

Toistaiseksi niin hyvä. Katsotaan nyt interpolointi. Tässä on "eilinen sulkeminen arvo oli ..." (toivottavasti!):

 & lt; kohde & gt; arabialainen teksti täällä & lt; x
ID = "interpolointi" equiv-teksti = "{{closingvalue
| Valuutta: & amp; APOS; GBP & amp; APOS; }} "/> ;.< ;/target> tuhat kuin98]
  

   Käytä numeroa, kun käännät, jotta voit nähdä, missä interpolointi pitäisi olla. Huomaa, että kun näet käännetyn tuloksen Google-käännöksessä, se näkyy peruutettuna - eli alussa oleva numero - mutta kun kopioit ja liitä se käännöstiedostoon, se palaa alkuperäiseen järjestykseen. Tämä tapahtuu, koska arabia on RTL-kieli, joten komentosarja on kokonaan peilattu kokonaan. Google Translate tekee tämän lisäämällä "DIR =" RTL "-määrityksen sisältävän elementtiin. Opimme tekemään tämän seuraavassa vaiheessa. Loput käännökset ovat saatavilla Demo Repo, "Tutorial" -konttori.
  
  

   19. Käsikirjoitus
  
  

   Meidän on hallinnoi komentosarjan suunnan sovelluksessamme, koska kulma ei tee tätä automaattisesti meille. Ei myöskään näytä olevan mitään keinoa havaita, onko nykyinen sijainti LTR tai RTL-kieli, joten meidän täytyy kovaa tätä. Olisi hienoa, jos kulma on tarjonnut sisäänrakennettua direktiivistä tätä.
  
  

   Avaa 'app.component.ts'. Tuo "Inject", "LOCALE_ID" ja "HostBinding" alkaen "@ Kulma / Core" ". Aseta sitten 'HostBinding' seuraavasti. Tämä lisää Appcomponentsin "Dir" -määrityksen ja asettaa oletuskielen suunta 'LTR':
  
  
 @hostbinding ('attr.dir') dir = 'LTR'; 
  

   Seuraavaksi lisää konstruktori ja pistää "LOCALE_ID". Muista, että tämä asetetaan kokoonpanolla, koska käytämme AOTia.
  
  
 Rakentaja (@inject (locale_id) Private Locale: String) {} 
  

   Ja lopulta lisää seuraava selkänoja olemassa olevaan "ngoninit" -menetelmään. Täällä tarkistamme, onko "LOCALE_ID" eli "ar-iq", alkaa 'AR' ja jos se muuttaa suuntaan "RTL".
  
  
 jos (this.locale.startswith ('ar')) {
     tämä.dir = 'rtl';
} 
  

   Jos aiot tukea enemmän paikallisia, sinun on todennäköisesti refactor tätä, jotta se olisi skaalautuva, koska tällä hetkellä tällä lähestymistapana ei pitäisi olla vain noin kymmenen RTL-kieltä. Aloita arabialainen sovellus ja sinun pitäisi nyt nähdä, että UI on peilattu - £-merkin pitäisi olla oikealla.
  
  

   20. Tuotanto
  
  

   Lopullinen askel on tuottaa ja tarkistaa tuotantokehitys. Ensinnäkin meidän on tehtävä toinen nopea muutos "Angular.json" -konfiguraatiolle.
  
  

   "Arkkitehti.build.configurations" kaksinkertaistaa olemassa oleva tuotantoobjekti ja nimeä se uudelleen "tuotanto-ar-iq" ". Kopioi ja liitä kiinteistöt nykyisestä "AR-IQ" -asetuksista esineeseen, joten sinulla on sekä tuotantovaihtoehdot että "I18N-vaihtoehdot.
  
  

   Sinun on myös päivitettävä "arkkitehti.serve.configurations". Tämä aika kopioi olemassa olevan "" Ar-IQ "-kohdan" ja nimetä se "" tuotanto-ar-iq "" ja muuttaa "Browsertargetin arvoa, joka osoittaa uuden" tuotanto-ar-IQ "-kokoonpanon.
  
  

   Nyt voit rakentaa ja palvella tuotannon arabian locale tätä komennolla:
  
  
 $ NG Serve --Configuration = Tuotanto-Ar-IQ 
  

   Okei, olemme valmiita! Olemme onnistuneesti kansainvälistyneet sovelluksemme ja paikallisti sen "en-GB" ja "Ar-IQ" yleisölle. Kulma tekee prosessista erittäin suoraviivaista kehittäjälle, itse asiassa vaikein bitti on selvittänyt, mitä käännökset olisi - anteeksi mihin tahansa arabialaisiin kaiuttimiin, jos mitään on väärin!
  
  

   
    Tämä artikkeli julkaistiin alun perin Creative Web Design -lehden web-suunnittelija 281.
   
   
    
     Osta numero 281 täällä
    
   
   
    tai
   
   
    
     Tilaa Web-suunnittelija tähän
    
   
   
    .
   
  
  

   
    Aiheeseen liittyvät artikkelit:
   
  
  

   

    
     Miten rakentaa koko sivun verkkosivusto
    
   
   

    
     Paras kannettavat ohjelmointiin vuonna 2019
    
   
   

    
     Miten rakentaa sovellus