Додайте багатомовну підтримку кутових

У цьому підручнику ми збираємося взяти вас через процес створення вашої програми доступним та зручним для людей по всьому світу. Лише близько 20 відсотків світу говорять по-англійськи, тому надання інших варіантів мови можуть покращити ваш користувацький досвід і значно збільшити доступ до програми. Ми збираємося поглянути на вбудовані інструменти інтернаціоналізації кутового кольору та показати вам, як правильно їх використовувати.

Якщо ви будуєте сайт, а не додаток, будьте впевнені, що ви отримали право на інструмент. Побачити наші напрямні до кращого Веб-будівельник і вершина веб хостинг щоб дізнатися більше.

Ми створили дуже просту демо-додаток, щоб продемонструвати процес. Клон його звідси а потім дотримуйтесь інструкцій з встановлення.

Почніть додаток, щоб ознайомитись з ним. Він просто відображає та оновлює випадкові числа та значення з різними контекстами, наприклад, валюти, дати тощо. Ми покрийте деякі труби та функції, що використовуються під час підручника.

• 17 Дійсно корисний дизайн підручників

01. Ключові терміни для підтримки мов

Існує два слова, які часто використовуються взаємозамінно, коли говорять про переклад програми - інтернаціоналізації та локалізації - однак, вони насправді означають дещо різні речі. Інтернаціоналізація відноситься до процесу підготовки до програми для підтримки різних мов. На відміну від цього, локалізація відноситься до процесу фактичного перекладу вашого додатка на необхідні мови. По суті, інтернаціоналізація - це те, що ви робите один раз на додаток, а локалізація відбувається колись на місцевості - принаймні, це план.

Ці умови також можуть бути знайомі у своїх скорочених версіях: I18N (де 18 - кількість букв між першим "i" та останньою "n" інтернаціоналізацією) та L10N (де 10 - кількість букв між "I" і "N" локалізації).

02. Що локалізація?

Є понад 6000 мов, які сьогодні використовуються у всьому світі, більшість з яких використовуються лише дуже малими групами людей. Проте, навіть якщо ми зосередилися лише на верхніх трьох мовах - мандарин, іспанська та англійська - існує значні відмінності у форматі дати, граматичної структури, плюралізації та форматування номерів.

Якщо ми включимо п'яту найпоширенішу мову - арабську мову - ми стикаємося з іншою різницею; Арабська мова - це праворуч (RTL) сценарій, що означає, що UI також повинен буде відображатися.

Отже, під час локалізації ми повинні розглядати граматику, макет та форматування відмінностей, і, звичайно, ми також повинні змінити сам текст. Кутова може допомогти з більшою кількістю цього, але вам все одно потрібно вручну перекладати текст (і зберегти переклад у хмара зберігання , тому це безпечно і обмін з вашою командою).

03. Місце в кутових

Нам потрібно буде локалізувати для кожного місця, який нам потрібно підтримати. Локал відноситься до загального сукупності переваг, зазначених вище міркування, що, як правило, поділяються в межах регіону світу, як правило, країною. Кожен локаль представлений ідентифікатором локалу Unicode, який визначає код мови та розширення мови.

Кутовий за замовчуванням Locale - це "en-us", який є мовним кодом "en" (англійською мовою), як це говорять у регіоні "США" (Сполучені Штати Америки). Додаток, який локальний для "EN-US" буде тонко відрізняється від програми, локалізованого для "EN-GB", який є англійською, як говорив у Великобританії. Наприклад, у датах США (Bafflingly) відформатовано MM / DD / YYYY, тоді як тут у Великобританії ми використовуємо більш розумний DD / MM / YYYY підхід. Ця незначна різниця може призвести до серйозної помилки в розумінні.

Щоб зробити речі цікавими, давайте локалізувати нашу демонстраційну програму для арабської мови, як розмовляє в Іраку, АКС "АР-ІК" та англійська мова, як розмовляє у Великобританії, АКС "ЕН-ГБ". Ми будемо використовувати англійську мову за замовчуванням цього разу.

04. Побудова конфігурації

Наш демонстраційний проект був створений з використанням кутових Cli, який включає в себе якийсь корисний інструмент. Ми збираємося використовувати попереду (AOT) компілятора для цього проекту, тому нам потрібно внести деякі зміни до файлу конфігурації CLI: "angular.json". Якщо ви хочете використовувати лише за часом (JIT), потрібно налаштувати речі трохи по-різному.

Завдяки побудові AOT ви отримуєте невелику, більш швидке відтворення готової програми, яка завантажує без необхідності асинхронних запитів для отримання речей, таких як шаблони та таблиці стилів. В результаті ви повинні створити побудову для кожного локального та обслуговувати відповідну збірку за допомогою URL-адреси або деякої логіки виявлення мови сервера. Найпростіший підхід - створити каталог для кожного регіону, наприклад, www.example.com/en-gb та www.example.com/ar-iq. Торгівля полягає в тому, що ви не можете перемикати мову на льоту, але насправді, що навряд чи буде щось, що вимагається реальними користувачами.

Перш за все, нам потрібно додати конфігурацію збірки для нашого арабського локалу. У файлі JSON шукає об'єкт "architect.build.configurations". Додайте наступний блок, щоб визначити конфігурацію для Locale:

 "AR-IQ": {
    "BASEHREF": "/ AR-IQ /",
    "DEWELURL": "/ AR-IQ /",
    "Вихідна група": "Дистрим / кутовий-I18N-демо /
AR-IQ ",
    "i18nfile": "src / locale / messages.ar-iq.
xlf ",
    "I18NFORMAT": "XLF",
    "I18NLocale": "AR-IQ" 

Ця конфігурація розповідає кутові, де виводячи складену збірку та який файл перекладу та формат для використання. Він також встановлює місцевість та розповідає кутовий, який каталог додаток буде розгорнуто.

Ми також повинні змінити параметри за замовчуванням у "Architect.Build.options", щоб використовувати Locale "EN-GB". Встановіть такі властивості, як показано. Примітка. Ми дозволяємо тут по всій дошці, тому він буде використовуватися для виробництва та розробки:

 "Науковийпат": "Дистрим / кутовий-I18N-демо /
en-gb »,
  "I18NLocale": "EN-GB",
  "Deployurl": "/ en-gb /",
  "basehref": "/ en-gb /",
  "AOT": правда 

Кутова підтримує ряд місць. Переконайтеся, що ви використовуєте правильне значення для властивості "i18nlocale". Ви можете побачити повний список тут .

За сценами вищезгадані конфігурації просто завантажуються та читаються з одного з цих файлів уподобання локалі.

05. Подавати конфігурацію

На додаток до налаштування виведення збірки ми також повинні налаштувати конфігурацію для команди "NG Serve" для розробки. Це більш простим, оскільки ми можемо просто вказати конфігурацію збірки, яку ми просто додали. У "angular.json" додати наступний блок для "architect.serve.configurations":

 "AR-IQ": {
    "Брауртрарт": "Кутовий-I18N-
Демо: будувати: AR-IQ ",
    "Серветка": "/ ar-iq /"
  } 

Тут ми з посиланням на параметри конфігурації збірки за допомогою властивості "Браунтаржет", і ми також встановимо "Servecath". Перш ніж ми зможемо або подавати або побудувати арабську програму, нам потрібно створити файл перекладу, наведених у властивості "i18nfile" вище. Кутовий CLI включає в себе інструмент для вилучення позначеного тексту в індустріальний стандартний файл перекладу.

Ми більш детально покриваємо ці файли пізніше у підручнику, але зараз нам просто потрібно експортувати основний, порожній файл, щоб дозволити нам компілювати.

Ми будемо використовувати команду "NG XI18N" з наступними параметрами. Це єдиний раз, коли ми включимо ідентифікатор Locale у файлі файлу '-out-File:

 $ ng xi18n --output-шлях Locale --ут-файл
messages.ar-iq.xlf --i18n-Locale AR-IQ 

Це має створити файл у каталозі SRC / Local. Відтепер ми завжди будемо вивести файл названих "повідомлень.xlf" і вручну скопіювати його над версією з ідентифікатором локалу в ім'я. Причиною цього є запобігання екстракційному інструменту від перезапису будь-яких існуючих перекладів, які ми додали до файлу.

06. Конфігурація перемикання

На цьому етапі ми можемо зараз скласти проект і подивитися, що відбувається, але нам потрібно сказати команду "NG Serve", яка конфігурація використовувати. Спочатку давайте подивимося на англійську версію. Ніяких змін тут, тому що англійська мова за замовчуванням:

 $ нг служити 

Як ви можете бачити, це виглядає як оригінальна версія, яка використовує момент за замовчуванням за замовчуванням "EN-US". Значна різниця - це валюта, яка зараз вказує US $ замість $. Гаразд, тепер спробуємо арабську версію. Зупиніть англійську версію та запустіть:

 $ нг служити --конфігурація = AR-IQ 

Як ви очікуєте, що в цій версії є більш очевидні відмінності, зокрема дата зараз написана арабською мовою. Кутовий може зробити це, тому що імена деяких речей, такі як місяці та дні, знаходяться з встановленого списку, і в кінцевому підсумку вони стосуються відомого числа. Все інше, однак, все ще англійською мовою.

07. Locale-Aware Труби

Подивіться на вихідний код "app.component.html", і ви побачите, що ми використовуємо ряд різних труб. Наступні кутові труби знають, що означає, що вони адаптують їх випуск на основі поточного локалу: "DatePipe", "CountryPipe", "DecimalPipe" та "ProcessPipe".

Якщо ви використовуєте ці труби, ретельно кутові будуть обробляти багато локалізації ночі для вас. Обережно ми маєте на увазі використання доступних заздалегідь визначених параметрів, де б ви не могли. Хорошим прикладом є форматування дату у Великобританії, яку ми згадували раніше. Якщо ви знаходитесь у Великобританії, і ви хочете відобразити дату, використовуючи (розумний) день-місячний формат, ви можете бути розчарованими, щоб виявити, що варіант попередньо визначеного '' ShortDate '' надає, як M / D / YY (наприклад, . 10/9/18) і спокусатися до жорсткого коду вашого бажаного формату, як це:

 {{mydate | Дата: 'dd / mm / y'}} 

Але тепер ми знаємо, що ми отримуємо формат m / d / yy, тому що кутовий використовує Locale за замовчуванням "en-us". Таким чином, замість того, щоб жорсткий час формату ми повинні використовувати опцію "Shortdate" та локалізувати нашу програму для використання "EN-GB".

 {{mydate | Дата: 'shorddate'}} 

Для того, щоб ми могли додати місцевість нашого серця, і завжди можна додати місцевості до вмісту нашого серця, і завжди є зручний формат дати.

08. Перевизначення попередньо визначених варіантів

На жаль, здається, що є легкий, вбудований спосіб перевизначити попередньо визначений формат. Наприклад, ви не можете просто вирішити, що ви віддаєте перевагу формату '' ShortDate '' 'dd / mm / yyyy замість dd / mm / y, оскільки немає способу змінити формат під час виконання. Також ви не можете додати свої попередньо визначені варіанти.

Для цих краю ви можете створити індивідуальну трубу, яка обгортає кутовий "datepipe" та обробляє будь-які спеціальні формати за місцем. Все, що він не визнає, буде передана до вбудованого "датчої труби".

09. CountryPipe

З шельфу "CommandPipe" буде форматувати номер як долари США, обрізані до двох десяткових місць та додати угруповання, як визначено у налаштуваннях Locale.

Ви помітите, що в обох наших місцях валюта завжди в доларах США. Він не магічно перемикається на Sterling (GBP), коли ви використовуєте Locale "EN-GB". Причиною цього полягає в тому, що £ 10 не такий самий, як $ 10, тому ви повинні явно вказати валюту, до якої належить.

Давайте оновимо "app.component.html" використовувати GBP протягом усього. Під час вказуючи кодекс валют, ви повинні використовувати правильне значення з стандарту ISO 4217 (список доступних в Інтернеті).

Змінити дві валютні труби, додаючи ":" GBP ", як це:

 {{value $ | async | Валюта: 'GBP'}} 

І ви почнете бачити символ £ замість US $.

Пам'ятайте, що це не робить нічого розумного, як автоматично конвертувати USD до еквівалентного значення в GBP, якщо ви зміните валюту - це просто змінює символ, який він використовує.

10. Переклад робочого процесу

Добре, тому ми отримали наші два місцеві налаштування, а кутові корисно роблять якусь роботу для нас з коробки, але текст все ще англійською. Кутова не може перекладати це автоматично, на жаль, але це може допомогти нам з частинами робочого процесу. Це те, що має відбутися:

• Flag Static Text у всіх компонентах для перекладу
• Експортувати файл перекладу, що містить цей статичний текст
• Змініть файл перекладу та додати відповідні переклади
• Об'єднайте перекладений файл перекладу назад у додаток

Кутова допомагає нам з кроками 2 та 4, але, як розробники, які нам потрібно зробити крок 1 вручну. Крок 3 зазвичай буде завершений професіоналом перекладу або агентства, використовуючи спеціальне програмне забезпечення для читання та оновлення файлу перекладу.

11. Деталі осі

Щоб досягти цього, ми повинні додати особливий атрибут до кожного елемента, який містить фіксований текст, який буде переведений. Щоб бути зрозумілим, якщо вміст приходить від API, то це не закріплений текст, і вам потрібно локалізувати це в API. Вам потрібно лише додати атрибут, коли текст записується безпосередньо в шаблоні HTML у своєму вихідному коді. Ключовим пунктом полягає в тому, що ви повинні спробувати зберегти свої тип-файли Locale-Agnostic - іншими словами, уникнути введення будь-якого тексту, який потрібно перекласти в логіку компонентів та тримати його в шаблонах. В іншому випадку інструмент вилучення не зможе витягти його. Це хороша практика, щоб відокремити свої проблеми - у житті та в коді.

Давайте відкриєте "app.component.html" та почати з "поточного значення". Просто додайте атрибут "i18n" до елемента, який безпосередньо містить текст.

 & lt; div class = "meta__title" i18n & gt;
     Поточне значення
   & lt; / div & gt; 

Важливо розуміти, що це просто атрибут "німий". Це не кутова Директива, яка викликає що-небудь під час виконання, насправді, компілятор знімає його після перекладу.

У будь-якому випадку, давайте подивимося, що відбувається, коли ми знову запускаємо інструмент вилучення, щоб відновити файл перекладу. Пам'ятайте, що "-" - це лише "повідомлення.xlf" зараз:

 $ ng xi18n --output-шлях Locale --ут-файл
messages.xlf --i18n-Locale AR-IQ 

Відкрийте файл виводу XLF, і ви повинні побачити новий блок перекладу, який виглядає щось подібне до деякої додаткової контекстної інформації:

 & lt; trans-usul id = "face3d45c0f0cd38b726e7798da15
3E2F8D55551 "DataType =" HTML "& GT;
    & lt; джерело & gt;
      Поточне значення
    & lt; / source & gt; 

Відмінно, це означає, що інструмент підбрав атрибут "I18N". Цей довгий ідентифікатор генерується інструментом і залишається незмінним, якщо не зміниться текст. Якщо у вас є кілька екземплярів точно такий же текст, вони зможуть отримати той самий ідентифікатор. Не редагуйте цей ідентифікатор!

Якщо ви віддаєте перевагу, ви можете вказати власний ідентифікатор у атрибуті "I18N". Якщо ви це зробите, ідентифікатор буде залишатися таким же, навіть якщо текст змінюється, тому вам потрібно бути впевненим у вас немає ідентифікаційних зіткнень у вашому додатку. Використовуйте префікс "@@", щоб встановити індивідуальний ідентифікатор. Тут ідентифікатор стане "заголовком":

 & lt; div class = "meta__title" i18n = "@@ title" & gt;
     Поточне значення
   & lt; / div & gt; 

12. Додайте певний контекст

Для того, щоб перекладач міг забезпечити точний переклад, вони часто повинні знати контекст, який використовується текст. Атрибут "I18N" дозволяє визначити опис та сенс, щоб допомогти перекладача. Формат виглядає наступним чином:

 & lt; div i18n = "Значення | Опис @@
CustomID "& gt; text & lt; / div & gt; 

Давайте оновимо наш назву з значенням та описом:

 & lt; div class = "meta__title" i18n = "карта
Назва | Значення в цей момент у часі @@ назва "& gt;
     Поточне значення
   & lt; / div & gt; 

Це має дати достатній контекст перекладача, щоб забезпечити точний переклад. Відрегрувати файл перекладу, і ви побачите, що ці значення були висновок. Варто відзначити, що якщо ви не використовуєте індивідуальний ідентифікатор, створений ідентифікатор, який має значення та враховує текст. Отже, той же текст, але з іншим значенням, отримає інший ідентифікатор. Однак опис не впливає на ідентифікатор.

13. Текст з змінними

Давайте перейдемо до секції Intro. Перший абзац містить текст та змінну, яка буде інтерполяцією під час виконання. Як ми це робимо?

Добре щасливо це досить просто. Знову ж таки, нам потрібно додавати значущий атрибут "I18N" до містить елемент. Додайте його безпосередньо до елемента абзацу:

 & lt; p i18n = "Заключне значення | Значення, коли ринок
Закритий вчора @@ closingvalue "& gt;
Запустіть інструмент екстракції знову, і ви побачите цей новий блок перекладу:
  & lt; trans-user id = "закриттявалую"
DataType = "HTML" & GT;
    & lt; джерело & gt; Вчора & amp; apos;
& lt; x id = "інтерполяція" equiv-text = "{{{
закриттявалуя | Валюта: & amp; apos; gbp & amp; apos;
}} "/ & gt;. & lt; / source & gt; 

Подивіться, як змінна інтерполяція була докладена на виході. Приємна річ, яка дозволяє перекладача модифікувати граматичну структуру речення, якщо це необхідно, не порушуючи зв'язування. Наприклад, може бути мову, де вирок буде найкращим чином написано: X значення було вчорашнє закриття, тобто з змінною на початку.

14. Плюралізація

Перехід до наступного абзацу Ви побачите якийсь залякуючий синтаксис. Це називається форматом повідомлення ICU, і це дозволяє вказати різні шматки тексту на основі значення змінної.

Ви можете використовувати це, щоб додати "S" до слів англійською мовою, коли значення дорівнює нулю, ні. Наприклад, якщо "секунди" є змінною, що містить кількість секунд, ми можемо використовувати цей вираз плюралізації ICU:

 {{секунд}} {секунд, множинний, один
{секунда}, інші {секунди}} 

Який виводиться:

• 0 секунд
• 1 секунда
• 2 секунди

Він не може бути документований, але ви також можете використовувати "Asyncpipe" всередині синтаксису плюралізації для роботи з спостереженнями.

У цьому прикладі "одна" та "інша" є категоріями плюралізації. Є кілька категорій для вибору, але будьте обережні! Не всі локальні підтримують всі категорії, а кутова не говорить вам, якщо ви намагаєтеся використовувати категорію, яка не підтримується поточним місцем. Легко в кінцевому підсумку, думаючи, що ви зробили щось неправильно, тому що "дві" категорія не працює у вашому регіоні "EN-GB", а замість цього ви бачите "інший" текст. Незрозуміло "en" (і багато інших загальних мов) лише підтримують "один" та "інший", хоча "нуль" і "два" є явними значеннями.

Ознайомтеся з цим файлом щоб побачити, що насправді підтримується.

15. Кілька радіальних стрижнів

Ми можемо працювати навколо цього обмеження, використовуючи числа замість категорій. Просто префікс значення з "=":

 Там {спостерігачів, множини, = 0 {ніхто} = 1
{одна людина} = 2 {два людини}
    інші {{{watchers}} люди}}
Переглядаючи зараз. 

Це вже налаштовано в Demo App, нам просто потрібно додати атрибут "I18N" до абзацу, що містить:

 & lt; p i18n = "спостерігачі | кількість людей
Спостерігаючи за значенням @ watchers "& gt; 

Запустіть інструмент вилучення знову, щоб побачити, як це виглядає. Ви побачите, що це трохи по-різному. Він створить два підрозділи перекладу; Один для самого вираження ICU та один, який інтерполює цей вираження в оригінальний рядок.

16. Виберіть Вираз

Якщо ви хочете відобразити інший текст залежно від значення змінної, ви можете використовувати "вибрати" ECU EXPRICES, яка дуже схожа на синтаксис "множинний", демонструється вище. У нашому демонстраційному додатку ми контролюємо зміну, що застосовуються до значення та створюємо спостережуваний потік, який називається "Trend $", який виводить "," Down "або" стабільний "залежно від того, чи зміна позитивна, негативна або нуль.

Потім ми підключаємося до нашого вираження ICU, щоб вивести іншу рядок залежно від значення потоку. Тут ви можете побачити "Asyncpipe" у використанні:

 значення {trend $ | Async, виберіть, вгору
{збільшення} вниз {зменшення} стабільний
    {не змінювався}} 

Це дещо чистий синтаксис, ніж використання "NGIF" або "NGSwitch", щоб маніпулювати DOM, а також добре відтворюється з інструментом вилучення. Додайте атрибут "i18n" до містить елемент:

 & lt; div class = "card__info" i18n = "значення
trend | описує зміну вартості trend @@ trend "& gt; 

Відрегрувати файл перекладу, і ви побачите, що підхід схожий на виробництво множини, з двома підрозділами перекладу. ECU вирази досить зручно, коли ви звикнете до них, плюс ви можете гнівити їх, щоб створити більш складні виходи.

17. Додати переклади

Ще один атрибут "i18n" для додавання:

 & lt; div class = "card__info" i18n = "транзакції
Підрахуйте | Кількість транзакцій сьогодні @@
операції "& gt;
     Операції: {{transactions $ | async |
Номер}}
   & lt; / div & gt; 

Тепер ми позначили весь текст, який потребує перекладу, ми можемо генерувати файл перекладу в останній раз. Одного разу він створюється перейменовувати його "messages.ar-iq.xlf" та замінити попереднє втілення. Це файл, який ми будемо відправляти до професійного перекладу, але для цілей цього підручника, Google Translate буде стояти!

Відкрийте файл XLF і дублюйте кожен '& lt; джерело & gt;' Елемент, перейменування його "& lt; target & gt;". На жаль, це може бути цілком неохайним, тому це може допомогти прикрасити вміст.

Щоб перевірити, у нас є всі, збережіть файл і запустіть програму з арабською мовою:

 $ нг служити --конфігурація = AR-IQ 

Якщо ви бачите будь-які повідомлення в терміналі, як це означає, що ви пропустили один:

 Помилка помилок Xliff Parse: повідомлення * ID *
Проманьє переклад ("

Сподіваюся, у вас не буде мати помилок, і ви зможете побачити додаток у браузері. Ми ще не додали жодної арабської арабської мови, тому це не виглядає сильно іншим.

18. Google Translate

Почнемо з чимось легким - назва "поточне значення". Google Translate говорить мені, що це має бути (арабський текст тут), тому оновіть значення в "& lt; target & gt"; Елемент:

 & lt; джерело & gt; поточне значення & lt; / source & gt;
       & lt; target & gt; арабський текст тут & lt; / target & gt; 

Все йде нормально. Тепер давайте зробимо один з інтерполяцією. Ось "Вчорашня вартість закриття була ..." (сподіваюся!):

 & lt; target & gt; арабський текст тут & lt; x
id = "інтерполяція" equiv-text = "{{closingvalue
| Валюта: & amp; apos; gbp & amp; apos; }} "/&gttys.</target> ;

Використовуйте номер, коли ви перекладаєте, щоб ви могли бачити, де слід бути інтерполяцією. Зверніть увагу, що, коли ви побачите перекладений результат у перекладі Google, він з'явиться скасований - тобто номер на початку - але коли ви копіюєте та вставте його у файл перекладу, він повернеться до початкового замовлення. Це відбувається, оскільки арабська мова - це мова RTL, тому скрипт (майже) цілком дзеркальний. Google Translate робить це, додавши атрибут 'dir = "rtl" до містить елемент. Ми дізнаємося, як це зробити на наступному кроці. Решта перекладів доступні в демо-репо, "Підручник".

19. Напрямок сценарію

Ми повинні керувати напрямком сценарію в нашому додатку, оскільки кутовий не буде робити це автоматично для нас. Також не може бути будь-яким способом виявлення, якщо поточний Locale є LTR або RTL мова, тому нам доведеться Hardcode це. Це було б чудово, якщо для цього кутова запропонувала вбудовану директиву.

Відкрийте "app.component.ts". Імпортуйте "Inject", "LOCALE_ID" та "HostBinding" з "" @ Кутова / Core ". Потім налаштуйте "хостівка" наступним чином. Це додасть атрибут "DIR" до AppComponent та встановив напрямок мови за умовчанням до "LTR":

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

Далі додати конструктор і введіть "locale_id". Пам'ятайте, що це встановлено нашою конфігурацією, оскільки ми використовуємо AOT.

 Конструктор (@Inject (Locale_id) Приватний локал: String) {} 

І, нарешті, додати наступний фрагмент до існуючого методу "Ngoninit". Тут ми перевіряємо, чи "Locale_id", тобто "AR-IQ", починається з "AR", і якщо він замість цього змінюється напрямок "RTL".

 Якщо (це .locale.startswith ('ar')) {
     це.dir = 'rtl';
} 

Якщо ви плануєте підтримувати більше локацій, то вам, ймовірно, доведеться референтувати це, щоб зробити його більш масштабованим, однак, оскільки сьогодні існує лише близько десяти мов РТЛ, що сьогодні цей підхід не повинен бути занадто громіздким. Запустіть арабську програму, і тепер ви повинні побачити, що інтерфейс UI - знак £ повинен бути справа.

20. Виробництво

Останній крок полягає у створенні та перевірці нашої продукції. По-перше, хоча нам потрібно зробити іншу швидку модифікацію до конфігурації "angular.json".

У "architect.build.configurations" дублює існуючий виробничий об'єкт і перейменувати його "" виробництво-ар-IQ ". Потім скопіюйте та вставте властивості з існуючої "" "AR-IQ" "" конфігурації в об'єкт, тому у вас є як варіанти виробництва, так і параметри "I18N".

Також потрібно також оновити "architect.serve.configurations". Цього разу дублюйте існуючий "" "об'єкт" AR-IQ "та перейменуйте його" "виробництво-AR-IQ" та змініть значення "Браунтаржет", щоб вказати на вашу нову "виробничу-ар-IQ" конфігурацію.

Тепер ви можете побудувати та обслуговувати свою продукцію Arabic Locale за допомогою цієї команди:

 $ нг служити - конфігурація = виробництво-AR-IQ 

Добре, ми зробили! Ми успішно інтернаціоналізували нашу програму та локалізували його для аудиторій "EN-GB" та "AR-IQ". Кутовий робить процес надзвичайно простим для розробника, насправді найважчий біт з'ясує, що переклади повинні бути - вибачення до будь-яких арабських спікерів, якщо щось не так!

Ця стаття була опублікована у випуску 281 Web Designer Web Designer. Купити проблему 281 тут або Підписатися на веб-дизайнер тут .

Пов'язані статті:

• Як побудувати веб-сайт повного сторінки в кутові
• Кращі ноутбуки для програмування в 2019 році
• Як створити додаток