Přidání vícejazyčné podpory na úhlovou

V tomto tutoriálu vás budeme vezmeme prostřednictvím procesu, kdy vaše aplikace přístupná a uživatelsky přívětivá pro lidi po celém světě. Jen asi 20 procent světa mluví anglicky, takže poskytování dalších jazykových možností může zlepšit vaše uživatelské zkušenosti a značně zvýšit dosah vašeho app. Podíváme se na úhlové vestavěné internacionalizační nástroje a ukážeme vám, jak je správně používat.

Pokud stavíte místo spíše než aplikaci, ujistěte se, že máte pravdu. Podívejte se na naše průvodce podle nejlepšího Webové stránky Builder. a top. web hosting zjistit více.

Vytvořili jsme velmi jednoduchou demo aplikaci pro prokázání procesu. Klonovat odtud a poté postupujte podle pokynů pro instalaci.

Spusťte aplikaci, abyste se s ním seznámili. Stačí zobrazuje a aktualizuje náhodná čísla a hodnoty s různými kontexty, např. Měny, data atd. Zakázeme některé trubky a funkce používané během tutoriálu.

• 17 Opravdu užitečné reagující návrhové tutoriály

01. Klíčové podmínky pro podpůrné jazyky

Existují dvě slova, která se často používají zaměnitelně, když mluví o překládání aplikace - internacionalizace a lokalizace - ve skutečnosti to znamenají mírně odlišné věci. Internacionalizace odkazuje na proces přípravy aplikace pro podporu různých jazyků. Naproti tomu lokalizace odkazuje na proces skutečně překládat aplikaci do požadovaných jazyků. V podstatě internacionalizace je něco, co děláte jednou za aplikaci a lokalizace se stane jednou za národní prostředí - alespoň to je plán.

Tyto podmínky mohou být také obeznámeni v jejich zkrácených verzích: I18n (kde 18 je počet písmen mezi prvními "I 'a poslední" n "internacionalizace) a L10N (kde 10 je počet písmen mezi" I " a "n" lokalizace).

02. Co je lokalizace?

Tam je více než 6 000 jazyků používaných po celém světě dnes, z nichž většina používá pouze velmi malé skupiny lidí. Dokonce i kdybychom se zaměřili pouze na tři jazyky - mandarin, španělsky a angličtina - budou existovat významné rozdíly v datum formátování, gramatické struktuře, množení pluralise a formátování čísel.

Pokud patříme pátý nejrozšířenější jazyk - arabština - setkáváme se s jiným rozdílem; Arabština je skript vlevo doleva (RTL), což znamená, že uživatelské rozhraní budou muset být také zrcadlí.

Takže během lokalizace musíme zvážit gramatika, rozvržení a formátování rozdílů, a samozřejmě musíme také změnit samotný text. Úhlová může pomoci s většinou toho, ale stále potřebujete ručně překládat text (a uložte překlad v cloudové úložiště , takže je to bezpečné a sdílené s vaším týmem).

03. Lokálie v úhlovém

Budeme muset lokalizovat pro každé národní prostředí, které potřebujeme k podpoře. Locale se týká obecné souboru preferencí pro výše uvedené úvahy, které mají tendenci být sdíleny v rámci světa, typicky země. Každé národní prostředí je reprezentováno identifikátorem národního prostředí Unicode, který specifikuje kód jazyka a rozšíření národního prostředí.

Výchozí národní prostředí úhlů je "en-nás", což je jazykový kód "en" (angličtina), jak mluví v regionu "USA" (Spojené státy americké). Aplikace lokalizovaná pro 'en-nás' bude jemně odlišná od aplikace lokalizované pro 'en-gb', která je angličtina jako mluvená ve Velké Británii. Například v amerických datech jsou (zmatené) formátované mm / dd / yyyy, zatímco zde ve Velké Británii používáme více rozumnější přístup dd / mm / yyyy. Tento menší rozdíl může mít za následek hlavní chybu v porozumění.

Aby se věci zajímalo, pojďme lokalizovat naši demo aplikaci pro arabštinu jako mluvené v Iráku, AKA 'AR-IQ' a Angličtina jako mluvená ve Velké Británii, AKA 'EN-GB'. Jako výchozí nastavení použijeme angličtinu.

04. Sestavte konfiguraci

Náš demo projekt byl vytvořen pomocí úhlové CLI, který zahrnuje některé užitečné nástroje. Pro tento projekt použijeme kompilátor dopředu (AOT) (AOT), takže musíme provést některé změny konfiguračního souboru CLI: 'Angular.json'. Pokud chcete použít jen-in-time (JIT), musíte nakonfigurovat věci mírně jinak.

S AOT stavět dostanete malý, rychlejší vykreslení připravené k připravenému k-go, která načte bez nutnosti asynchronních požadavků na přetvoření věcí, jako jsou šablony a stylesheets. V důsledku toho musíte vytvořit sestavení pro každé národní prostředí a sloužit příslušnému sestavení pomocí adresy URL nebo nějakého druhu logiky jazykového jazyka na straně serveru. Nejjednodušším přístupem je vytvořit adresář pro každé národní prostředí, např. www.example.com/en-gb a www.example.com/ar-iq. Trade je, že nemůžete přepínat jazyk on-the-fly, ale ve skutečnosti, která je nepravděpodobné, že by bylo něco potřebné skutečnými uživateli.

Nejdříve musíme přidat konfiguraci sestavení pro naše arabské národní prostředí. V souboru JSON hledejte objekt "architekt.build.configurace". Přidejte následující blok pro definování konfigurace pro národní prostředí:

 "AR-IQ": {
    "Basehref": "/ AR-IQ /",
    "Deplyurl": "/ AR-IQ /",
    "výstup": "dist / Angular-i18n-demo /
AR-IQ ",
    "I18nfile": "SRC / Locale / Messages.ar-IQ.
xlf ",
    "I18nformat": "XLF",
    "I18nlocale": "AR-IQ" 

Tato konfigurace vypráví úhlovou, kde výstup kompilovaného sestavování a který překladů a formát pro použití. To také nastavuje národní prostředí a říká úhlovému adresáři, který aplikace bude nasazena.

Potřebujeme také upravit výchozí možnosti v 'architect.build.Options' pro použití národního prostředí 'En-GB'. Nastavte následující vlastnosti podle obrázku. Poznámka: Uvádíme si zdarma zde přes palubu, takže bude použit pro výrobu a výstavby výstavby:

 "výstup": "dist / Angular-i18n-demo /
en-gb ",
  "I18nlocale": "en-gb",
  "Deplyurl": "/ en-gb /",
  "Basehref": "/ en-gb /",
  "AOT": TRUE 

Úhlové podporuje řadu lokalit. Ujistěte se, že používáte správnou hodnotu vlastnosti 'i18nlocale'. Můžete zobrazit kompletní seznam tady .

Za scénou Výše ​​uvedené konfigurace jednoduše načte a přečtěte si z jednoho z těchto souborů preferencí národního prostředí.

05. Podáváme konfiguraci

Kromě konfigurace výstupu sestavení musíme také nastavit konfiguraci pro příkaz 'ng sloužit' pro vývoj. To je upřímnější, protože můžeme jednoduše odkazovat na konfiguraci sestavení, kterou jsme právě přidali. V "Angular.json" přidejte následující blok na "architekt.Serve.configurace": \ t

 "AR-IQ": {
    "prohlížeče": "Angular-i18n-
Demo: Sestava: AR-IQ ",
    "Servepath": "/ AR-IQ /"
  } 

Zde se odvoláváme možnosti sestavení konfigurace pomocí vlastnosti "Průzevarget" a my také nastavujeme "serverepath". Než budeme moci buď sloužit nebo budovat arabskou aplikaci, musíme vytvořit překladový soubor odkazovaný v vlastnost "i18nfile" výše. Úhlové CLI obsahuje nástroj pro extrahování vlajkového textu do souboru typu průmyslově standardní překlad.

Tyto soubory se podrobněji pokrývají později v tutoriálu, ale nyní prostě musíme exportovat základní, prázdný soubor, který nám umožní kompilovat.

Použijeme příkaz "ng xi18n" s následujícími možnostmi. Jedná se o jediný čas, kdy budeme obsahovat ID národního prostředí v souboru ",-ite-file":

 $ ng xi18n -output-Path Locale-it
Zprávy.ar-iq.xlf -i18n-Locale AR-IQ 

To by mělo vytvořit soubor v adresáři SRC / Locale. Od nynějška budeme vždy vydávat soubor s názvem 'Messages.xlf' a ručně jej zkopírujte přes verzi s ID locale v názvu. Důvodem je, aby zabránil přepsání s extrakčním nástrojem z přepsání existujících překladů, které jsme přidali do souboru.

06. Přepínač Konfigurace

V tomto okamžiku nyní můžeme tento projekt kompilovat a zjistit, co se stane, ale musíme říct příkaz "ng sloužit", který konfigurace použít. Nejdříve se podívejme na anglickou verzi. Žádné změny zde proto, že angličtina je výchozí:

 $ ng sloužit 

Jak vidíte, že to vypadá podobně jako původní verze, která využívá výchozí národní prostředí CS-US '. Pozoruhodný rozdíl je měna nyní specifikuje US $ místo jen $. Dobře, teď zkusme arabskou verzi. Zastavte anglickou verzi a spusťte:

 $ ng sloužit --konfigurace = AR-IQ 

Jak byste očekávali, že v této verzi jsou jasnější rozdíly, zejména datum je nyní napsáno v arabštině. Úhlová může to udělat, protože jména některých věcí, jako jsou měsíce a dny, jsou ze seznamu a nakonec se vztahují na známé číslo. Všechno ostatní je však stále v angličtině.

07. Lokální trubky

Udělejte si bližší pohled na zdrojový kód 'app.Component.html' a uvidíte, že používáme řadu různých trubek. Následující úhlové trubky jsou locale-vědomy, což znamená, že přizpůsobují svůj výstup na základě aktuálního národního prostředí: 'DEGEPIPE', 'Currencypipe', 'DeciMalPipe' a 'ProcentPipe'.

Pokud používáte tyto trubky pečlivě úhlové, zvládne pro vás spoustu lokalizačních ložisek. Opatrně máme na mysli dostupné předdefinované možnosti, ať jste kdekoli můžete. Dobrým příkladem je americká vs britská data formátování, které jsme zmínili dříve. Pokud jste ve Velké Británii a chcete zobrazit datum pomocí (rozumný) formát (rozumný) den-měsíc-rok, můžete být frustrováni, abyste zjistili, že předdefinovaná volba '' '' shortdate '' 'byla vykreslena jako m / d / yy (např . 10/9/18) a buďte v pokušení pro hardcode požadovaného formátu takto:

 {{mydate | Datum: 'dd / mm / y'}} 

Ale nyní víme, že dostáváme formát m / d / yy, protože úhlováři používá standardní národní prostředí "en-nás". Takže namísto hardcoding formát bychom měli použít možnost '' shortdate '' možnost a lokalizovat naši aplikaci použít 'en-gb'.

 {{mydate | Datum: 'Shortdate'}} 

To trvá drobné více úsilí, ale pak můžeme přidat prostředí do obsahu našeho srdce a vždy mít uživatelsky příjemný formát data.

08. Přepsání předdefinovaných možností

Bohužel to nezdá, že existuje snadný, vestavěný způsob, jak přepsat předdefinovaný formát. Nemůžete se například rozhodnout, že byste upřednostňovali formát '' 'shortdate' ', aby byl dd / mm / rrrr namísto dd / mm / y, protože není způsob, jak změnit formát za běhu. Také nemůžete přidat své vlastní předdefinované možnosti.

Pro tyto okrajové případy můžete vytvořit vlastní datum trubku, která zabalí úhlové "DeMataPipe" a zpracovává všechny vlastní formáty na národní prostředí. Cokoliv, co neuznává, by bylo předáno do vestavěného "DATEPIPE".

09. CurrencyPipe.

Vyšel police "CurrenCrenypipe" formátovat číslo jako americké dolary, oříznutí na dvě desetinná místa a přidávají seskupení, jak je definováno v preferencích národního prostředí.

Všimnete si, že v obou našich lokalitách je měna vždy v amerických dolarech. Není magicky přepínat do Sterling (GBP), když použijete národní prostředí "EN-GB". Důvodem je, že £ 10 není stejný jako $ 10, takže musíte explicitně zadat měnu, které vaše číslo odkazuje.

Update 'app.component.html' pro použití GBP. Při určování kódu měny musíte použít správnou hodnotu z normy ISO 4217 (seznam dostupných online).

Změnit dvě měnové trubky přidáním ":" GBP "jako takto:

 {{hodnota $ | Async | Měna: 'GBP'}} 

A začnete vidět symbol £ namísto US $.

Nezapomeňte, že neudělá nic chytrého jako automaticky převést USD na ekvivalentní hodnotu v GBP, pokud změníte měnu - pouze změní symbol, který používá.

10. Překladační pracovní postup

Dobře, takže máme naše dva místní lokality nakonfigurované a úhlové je užitečně dělá některé z práce pro nás z krabice, ale text je stále v angličtině. Úhlová nemůže to automaticky přeložit, bohužel, ale může nám pomoci s částmi pracovního postupu. To se musí stát:

• Vlajka Statický text ve všech komponentách pro překlad
• Exportový překladový soubor obsahující tento statický text
• Upravte překladový soubor a přidejte příslušné překlady
• Sloučit přeložený překladový soubor zpět do aplikace

Úhlová pomáhá nám s kroky 2 a 4, ale jako vývojáři, které musíme udělat krok 1 ručně. Krok 3 by obvykle bylo dokončeno pomocí překladatelského profesionála nebo agentury, pomocí speciálního softwaru pro čtení a aktualizaci překladového souboru.

11. Podrobnosti o osy

K dosažení tohoto využití musíme přidat speciální atribut každému prvku, který obsahuje pevný text, který má být přeložen. Chcete-li být jasné, pokud obsah dorazí z API, pak to není pevný text a budete muset lokalizovat to v API. Stačí přidat atribut, když je text napsán přímo do šablony HTML ve zdrojovém kódu. Klíčovým bodem je, že byste se měli snažit udržet vaše strypscript soubory Locale-Agnostic - jinými slovy, vyhněte se uvedení libovolného textu, který je třeba přeložit do logiky komponenty a udržet jej vše v šablonách. V opačném případě jej extrakční nástroj nebude moci extrahovat. Je to dobré praxe stejně oddělit vaše obavy - v životě a v kódu.

Pojďme se otevřít 'app.component.html' a začněte s titulem "Aktuální hodnota". Jednoduše přidejte atribut 'i18n' k prvku, který přímo obsahuje text.

 & lt; divá třída = "meta__title" i18n & gt;
     Současná cena
   & lt; / div & gt; 

Je důležité pochopit, že se jedná o 'Dumb' vlastní atribut. Není to úhlová směrnice, která spustí cokoliv při běhu, ve skutečnosti, kompilátor jej odstraní po překladu.

V každém případě, podívejme se, co se stane, když spustíme nástroj pro extrakci znovu regenerovat překladový soubor. Nezapomeňte, že '-out-File' je právě 'zprávy.xlf' nyní:

 $ ng xi18n -output-Path Locale-it
Zprávy.xlf --i18n-Locale AR-IQ 

Otevřete soubor výstupu XLF a měli byste vidět nový blok překladu jednotky, který vypadá něco takového s některými dalšími informacemi o kontextech:

Skvělé, to znamená, že nástroj zvedl atribut 'i18n'. Toto dlouhé ID je generováno nástrojem a zůstane stejný, pokud změní text. Pokud máte více instancí přesně stejného textu, budou všechny stejné ID. Neupravujte toto ID!

Pokud dáváte přednost, můžete zadat vlastní ID v atributu 'i18n'. Pokud to provedete, ID zůstane stejné i v případě, že se text změní, takže je třeba se ujistit, že nemáte žádné ID kolize v aplikaci. Pomocí předpony "@@" nastavte vlastní ID. Zde se ID stane "titul":

 & lt, div class = "meta__title" i18n = "@@ titul" & gt;
     Současná cena
   & lt; / div & gt; 

12. Přidejte nějaký kontext

Aby byl překladatel schopen poskytnout přesný překlad, který bude často potřebovat znát kontext, který je použit text. Atribut 'I18N' umožňuje definovat popis a význam pomoci překladateli. Formát je následující:

 & lt, div I18n = "Význam | popis @@
Customid "& gt; text & lt; / div & gt; 

Aktualizujte náš titul s významem a popisem:

To by mělo poskytnout překladatele dostatek kontextu, aby poskytl přesný překlad. Regenerovat překladový soubor a měli byste vidět tyto hodnoty byly výstupy. Stojí za zmínku, že pokud nepoužíváte vlastní ID, generované ID má význam a text zohlední. Tak stejný text, ale s jiným významem, dostane jiné ID. Popis však nemá žádný vliv na ID.

13. Text s proměnnými

Pojďme přejít na sekci Intro. První odstavec obsahuje text a proměnnou, která bude interpolována při běhu. Jak to zvládneme?

Dobře šťastně je to poměrně přímočarý. Opět musíme přidat významný "I18n" atributu obsahujícím prvku. Přidejte jej přímo na prvek odstavce:

 & lt, p i18n = "Uzavírací hodnota | hodnota při trhu
zavřeno včera @@ closingvalue "& gt;
Spusťte nástroj Extrakce znovu a uvidíte tuto novou překladatelskou jednotku:
  

Podívejte se, jak byla variabilní interpolace podrobně popsána ve výstupu. Pěkná věc je, že umožňuje překladatele modifikovat gramatickou strukturu věty, pokud je to nutné, aniž by porušila vazbu. Například může existovat jazyk, kde by věta byla nejlépe napsána: X Hodnota byla včerejší zavírání, tj. S proměnnou na začátku.

14. Pluraliseation.

Přechod na další odstavec uvidíte nějakou zastrašující syntaxi. Toto se nazývá formát zprávy ICU a umožňuje zadat různé kousky textu na základě hodnoty proměnné.

Pokud je hodnota nula nebo ne, můžete jej použít k přidání slov do slov v angličtině. Například, pokud je "sekund" proměnnou obsahující počet sekund, které můžeme použít tuto vývazku pluralise ICU:

 {{sekundy}} {sekundy, množné číslo, jeden
{sekund}, další {sekundy}} 

Který bude vydávat:

• 0 sekund
• 1 sekunda
• 2 sekundy

Nezdá se, že není zdokumentován, ale můžete také použít "asyncpipe" uvnitř Syntaxe pluralise pro práci s pozorovatelskými.

V tomto příkladu "jeden" a "ostatní" jsou kategorie pluralise. Existuje řada kategorií, z nichž si můžete vybrat, ale pozor! Ne všechny lokality podporují všechny kategorie a úhlové neřekne, pokud se pokusíte použít kategorii, která není podporována aktuálním národním centrem. Je snadné skončit myšlení, že jste udělali něco špatného, ​​protože "dvě" kategorie nefunguje ve vašem locale "en-gb" a místo toho vidíte "jiný" text. Nevysvětlitelně "en" (a mnoho dalších společných jazyků) podporuje pouze "jeden" a "jiné", i když "nula" a "dva" jsou explicitní hodnoty.

Podívejte se na tento soubor vidět, co je vlastně podporováno.

15. Více radiálních sloupcových grafů

Toto omezení můžeme tento omezit pomocí čísel namísto kategorií. Prefix hodnotu s '=':

 Tam {Watchers, množný, = 0 {není nikdo} = 1
{je jedna osoba} = 2 {jsou dva lidé}
    Jiné {jsou {{woyers}} lidí}}
sledování právě teď. 

Toto je již zřízeno v aplikaci Demo, prostě musíme přidat atribut 'I18n' na odstavci obsahujícího:

 & lt; p i18n = "strážci | počet lidí
Sledování hodnoty @@ hlídače "& gt; 

Znovu spusťte nástroj pro extrakci, abyste zjistili, jak to vypadá. Uvidíte, že to je o něco mírně jinak. To vytvoří dva překladatelské jednotky; Jeden pro ICU výraz sám a jeden, který interpoluje tento výraz do původního řetězce.

16. Vyberte výraz

Chcete-li zobrazit jiný text v závislosti na hodnotě proměnné, můžete použít výraz "Select" ICU výraz, který je velmi podobný syntaxi "Plural'S" bylo prokázáno výše. V naší demo aplikaci sledujeme změnu aplikovanou na hodnotu a vytvoří pozorovatelnou tok "Trend $ ', který výstup" nahoru "," dolů "nebo" stabilní "v závislosti na tom, zda je změna kladná, negativní nebo nula.

Pak se připojit naši "Výběr" ICU výraz pro výstup jiný řetězec v závislosti na hodnotě proudu. Zde můžete vidět 'asyncpipe' v použití:

 Hodnota {Trend $ | Async, zvolte, nahoru
{zvýšená} dolů {snížená} stabilní
    {Nezměnil}} 

Jedná se o poněkud čistší syntaxe než použití "NGIF" nebo "ngswitch" pro manipulaci s DOM, plus také pěkně hraje s extrakčním nástrojem. Přidejte atribut 'I18n' na obsah obsahujícího:

 & lt, div class = "card__info" i18n = "
Trend | Popisuje hodnotu změnu trend @@ trend "& gt; 

Regenerovat soubor překladů a uvidíte, že přístup je podobný množnému výstupu, se dvěma překladatelskými jednotkami vytvořené. Výrazy JIP jsou docela užitečné, jakmile si na ně zvyknete, plus můžete hnízdit, abyste vytvořili složitější výstupy.

17. Přidat překlady

Ještě jeden atribut 'I18n' přidat:

 & lt, div class = "card__info" i18n = "transakce
počet osobních transakcí dnes @@
transakce "& gt;
     Transakce: {{transakce $ | Async |
Číslo}}
   & lt; / div & gt; 

Nyní jsme označili veškerý text, který potřebuje překlad, můžeme naposledy generovat překladový soubor. Jakmile je vytvořen přejmenovat jej na "zprávy.ar-iq.xlf" a nahraďte předchozí inkarnaci. Toto je soubor, který bychom posílali na překlad Professional, ale pro účely tohoto tutorial, Google přeložit bude stát v!

Otevřete soubor XLF a duplikujte všechny '& l; zdroj & gt; prvek, přejmenování na '& lt; cíl & gt;'. Bohužel to může být docela neuspořádaná, takže by to mohlo pomoci zkrášlit obsah.

Chcete-li zkontrolovat, že máme všechny, uložte soubor a spusťte aplikaci s arabským národním centrem:

 $ ng sloužit --konfigurace = AR-IQ 

Pokud vidíte nějaké zprávy v takovém terminálu, což znamená, že jste zmeškali jeden:

 Chyba v Chyby analýzy XLIFF: Zpráva * ID *
Chybí překlad ("

Doufejme, že nebudete mít žádné chyby a budete moci zobrazit aplikaci v prohlížeči. Přinoužili jsme však žádnou skutečnou arabštinu, takže to nevypadá mnohem jinak.

18. Google přeložit

Začněme s něčím snadno - "Aktuální hodnota" titulem. Google Translate mi říká, že by to mělo být (arabský text zde), takže aktualizujte hodnotu v '& l; cíl & gt;' živel:

 & lt; zdroj & gt; proudová hodnota & lt; / zdroj & gt;
       & lt; cíl & gt; arabský text zde & lt; / terč & gt; 

Zatím je vše dobré. Udělejme si s interpolací. Zde je "včerejší závěrečná hodnota byla ..." (doufejme!):

 Cíl & GT; arabský text zde & lt; x
ID = "Interpolace" EQUIV-TEXT = "{{CLOSINGVALUE
| Měna: & amp; gbp & amp; apos; }} "/> ;< ;/target> ;

Použijte číslo, když překládáte, takže můžete vidět, kde by měla být interpolace. Všimněte si, že když vidíte přeložený výsledek v Google Translate se zobrazí obrácené - tj. Číslo na začátku - ale při kopírování a vložení do překladového souboru se vrátí do původního pořadí. To se děje, protože arabština je jazyk RTL, takže skript je (téměř) zcela zrcadlené. Google Translate to dělá přidáním atributu "DIR =" RTL "" pro prvek obsahující. Naučíme se, jak to udělat v dalším kroku. Zbytek překladů je k dispozici v demo repo, "tutoriál" pobočky.

19. Směr skriptu

Musíme spravovat směrovek skriptů v naší aplikaci, protože úhlová neudělá automaticky pro nás. Také se nezdá být žádný způsob, jak detekovat, pokud je aktuální národní prostředí jazyk LTR nebo RTL, takže budeme muset tvrdit. Bylo by skvělé, pokud pro to úhlové nabídl vestavěnou směrnici.

Otevřete 'app.Component.ts'. Dovoz, injekce ',' locale_id 'a' hostbinding 'z' '@ anglagular / core' '. Poté nastavte 'Hostbinding' následovně. To přidá atribut 'dir' atribut do appcomponent a nastavit výchozí jazyk směr na 'ltr':

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

Další přidejte konstruktor a vstřikněte "Locale_ID". Nezapomeňte, že je nastaveno naší konfiguraci, protože používáme AOT.

 Konstruktor (@inject (Locale_ID) Private Locale: String) {} 

A nakonec přidejte následující úryvek do stávající metody "Ngoninit". Zde kontrolujeme, zda 'Locale_id', tj. 'Ar-IQ' začíná s 'Ar' a pokud to změní směr na 'RTL' místo toho.

 Pokud (this.locale.Startswith ('ar')) {
     Tento end.dir = 'rtl';
} 

Pokud máte v plánu podpořit více míst, pak budete pravděpodobně muset refaktorovat, aby bylo více škálovatelné, nicméně, protože tam jsou pouze deset jazyků RTL v používání tohoto přístupu by neměl být příliš neuchovlenější. Spusťte arabskou aplikaci a nyní byste měli vidět, že uživatelské rozhraní je zrcadleno - znaménko £ by mělo být vpravo.

20. Výroba

Posledním krokem je generování a zkontrolovat naše výrobní budovy. Nejprve však musíme udělat další rychlou modifikaci konfigurace "Angular.json".

V "architekt.build.configurace" duplikuje stávající výrobní objekt a přejmenovat jej "produkce-AR-IQ" ". Poté zkopírujte a vložte vlastnosti ze stávající konfigurace "AR-IQ" 'do objektu, takže máte možnosti výroby a možnosti "I18n".

Také potřebujete aktualizovat také "architekt.Serve.configurace". Tato doba duplikuje existující objekt "AR-IQ" "a přejmenujte jej" Production-AR-IQ "" a změňte hodnotu "prohlížečerget", přejděte na svou novou konfiguraci "Production-AR-IQ".

Nyní můžete vytvořit a sloužit své výrobní arabské národní prostředí s tímto příkazem:

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

Dobře, jsme hotovi! Úspěšně jsme internacionalizovali naši aplikaci a lokalizovali ji za "en-gb" a "ar-iq" publikum. Úhlová způsobuje tento proces pozoruhodně přímočarý pro vývojáře, ve skutečnosti nejtěžší bit je zjistit, jaké překlady by měly být - omluvy na všechny arabské reproduktory, pokud je něco špatného!

Tento článek byl původně publikován v čísle 281 tvůrčí webový design časopisu Web Designer. Koupit vydání 281 zde nebo Přihlásit se zde web designer zde .

Související články:

• Jak vytvořit celou stránku webové stránky v úhlově
• Nejlepší notebooky pro programování v roce 2019
• Jak vytvořit aplikaci