Интернационализация (i18n)

Интернационализация приложений — это многогранная область разработки, направленная на то, чтобы сделать приложения доступными и удобными для пользователей во всем мире. В этом руководстве описываются инструменты интернационализации Angular (i18n), которые могут помочь вам сделать ваше приложение доступным на нескольких языках.

Angular и i18n

Интернационализация — это процесс разработки и подготовки вашего приложения для использования на разных языках. Локализация — это процесс перевода вашего интернационализированного приложения на определенные языки для определенных регионов.

Angular упрощает следующие аспекты интернационализации:

  • Отображение дат, чисел, процентов и валют в локальном формате.
  • Подготовка текста в шаблонах компонентов для перевода.
  • Обработка слов во множественном числе.
  • Обработка альтернативного текста.

Для локализации вы можете использовать Angular CLI, чтобы сгенерировать большую часть шаблона, необходимого для создания файлов для переводчиков и для публикации вашего приложения на нескольких языках. После того, как вы настроили приложение для использования i18n, интерфейс командной строки может помочь вам в следующих шагах:

  • Извлечение локализуемого текста в файл, который вы можете отправить на перевод.
  • Создание и обслуживание приложения для данной локали с использованием переведенного текста.
  • Создание нескольких языковых версий вашего приложения.

Настройка языкового стандарта вашего приложения

Локаль — это идентификатор (id), который относится к набору пользовательских настроек, которые обычно используются совместно в пределах региона мира, например страны. В этом документе идентификатор языкового стандарта упоминается как «языковой стандарт» или «идентификатор языкового стандарта».

Идентификатор языкового стандарта Unicode состоит из идентификатора языка Unicode и (необязательно) символа, за которым следует расширение языкового стандарта. . Например, в идентификаторе локали `fr-CA« fr` относится к идентификатору французского языка, а `CA` относится к расширению локали Canada.

Angular следует соглашению Unicode LDML который использует стабильные идентификаторы (идентификаторы локали Unicode) на основе нормы BCP47. Очень важно, чтобы вы следовали этому соглашению при определении языкового стандарта, потому что инструменты Angular i18n используют этот идентификатор языкового стандарта для поиска правильных соответствующих данных языкового стандарта.

По умолчанию Angular использует языковой стандарт en- США, английский язык, на котором говорят в Соединенных Штатах Америки.

Идентификаторы локали, используемые CLDR и Angular, основаны на BCP47.. Эти спецификации меняются со временем; в следующей таблице предыдущие идентификаторы сопоставляются с текущими на момент написания:

LOCALE NAME СТАРЫЙ ЛОКАЛЬНЫЙ ID НОВЫЙ ЛОКАЛЬНЫЙ ID
индонезийский в id
Иврит iw he
Румынская Молдова mo ro-MD
Норвежский букмол no, no-NO nb
Китайский упрощенный zh-cn, zh-Hans-CN zh-Hans
Традиционный китайский zh-tw, zh-Hant-TW zh-Hant

i18n pipe

Угловые каналы могут помочь вам с интернационализацией: DatePipe, CurrencyPipe, DecimalPipe и PercentPipe используют данные локали для форматирования данных на основе LOCALE_ID.

По умолчанию Angular содержит данные локали только для en-US. Если вы устанавливаете значение LOCALE_ID для другого языкового стандарта, вы должны импортировать данные языкового стандарта для этого нового языкового стандарта. Интерфейс командной строки импортирует данные локали за вас, когда вы используете параметр —configuration с ng serve и ng build.

Если вы хотите импортировать данные локали для других языков, вы можете сделать это вручную, добавив это в src/app/app.module.ts

  import {registerLocaleData} from '@ angular/common'; import localeFr from '@ angular/common/locales/fr  ';//второй параметр' fr 'необязательный registerLocaleData (localeFr,' fr ');  

Live Demo:

Это просто фрагмент кода, объясняющий конкретную концепцию, и может не иметь вывода

См. Pen src/app/app.module.ts от w3resource (@ w3resource) на CodePen.

Первый параметр — это объект, содержащий данные локали, импортированные из @ angular/common/locales. По умолчанию импортированные данные языкового стандарта регистрируются с идентификатором языкового стандарта, который определен в самих данных языкового стандарта Angular. Если вы хотите зарегистрировать импортированные данные языкового стандарта с другим идентификатором языкового стандарта, используйте второй параметр, чтобы указать пользовательский идентификатор языкового стандарта. Например, данные языкового стандарта Angular определяют идентификатор локали для французского языка как «fr». Вы можете использовать второй параметр, чтобы связать импортированные данные французской локали с пользовательским идентификатором локали «fr-FR» вместо «fr».

Файлы в @ angular/common/locales содержат большую часть данные о локали, которые вам нужны, но некоторые расширенные параметры форматирования могут быть доступны только в дополнительном наборе данных, который вы можете импортировать из @ angular/common/locales/extra. В этом случае появляется сообщение об ошибке

  import {registerLocaleData} from '@ angular/common'; import localeFr from '@ angular/common/locales/fr';  импортировать localeFrExtra из '@ angular/common/locales/extra/fr'; registerLocaleData (localeFr, 'fr-FR', localeFrExtra);  

Live Demo:

Это просто фрагмент кода, объясняющий конкретную концепцию, и может не иметь никакого вывода

См. перо qGqxbj от w3resource (@ w3resource) на CodePen .

Перевод шаблонов

Процесс перевода шаблона i18n состоит из четырех этапов:

  1. Пометьте статические текстовые сообщения в шаблонах компонентов для перевода.
  2. Создайте файл перевода: используйте команду Angular CLI xi18n, чтобы извлечь отмеченный текст в стандартный перевод исходный файл.
  3. Отредактируйте сгенерированный файл перевода: переведите извлеченный текст на целевой язык.
  4. Объедините готовый файл перевода с приложение. Для этого используйте команду Angular CLI build для компиляции приложения, выбрав конфигурацию, зависящую от локали, или указав следующие параметры команды.
  • — i18nFile = путь к файлу перевода
  • — i18nFormat = формат файла перевода
  • — i18nLocale = идентификатор локали

Команда заменяет исходные сообщения переведенным текстом и генерирует новую версию приложения на целевом языке.

Вам необходимо создать и развернуть отдельную версию приложения для каждого поддерживаемого языка.

Отметьте текст атрибутом i18n

Атрибут Angular i18n отмечает переводимый контент. Поместите его в каждый тег элемента, фиксированный текст которого должен быть переведен.

В приведенном ниже примере тег

отображает простое приветствие на английском языке «Hello i18n!» записано в файле src/app/app.component.html
  `` 

Hello i18n!

``

Чтобы пометить приветствие для перевода, добавьте атрибут i18n к тегу

.
  `` 

Hello i18n!

``

i18n — это настраиваемый атрибут, распознаваемый инструментами и компиляторами Angular. После перевода компилятор удаляет его. Это не директива Angular.

Помогите переводчику с описанием и значением

Для точного перевода текстового сообщения переводчику может потребоваться дополнительная информация или контекст.

Вы можете добавить описание текстового сообщения в качестве значения атрибута i18n, как показано в примере ниже:

   

Здравствуйте, i18n!

Переводчику также может потребоваться знать значение или намерение текстовое сообщение в этом конкретном контексте приложения.

Чтобы добавить контекст, значение атрибута i18n начинается со значения и отделяется от описания знаком | символ: |

  

Здравствуйте, i18n!

Все вхождения текстового сообщения с одинаковым значением будут иметь одинаковый перевод. Текстовое сообщение, связанное с разными значениями, может иметь разные переводы.

Инструмент извлечения Angular сохраняет как значение, так и описание в исходном файле перевода, чтобы облегчить контекстно-зависимые переводы, но только их комбинацию значения и текстовое сообщение используются для генерации конкретного идентификатора перевода. Если у вас есть два похожих текстовых сообщения с разными значениями, они извлекаются отдельно. Если у вас есть два похожих текстовых сообщения с разными описаниями (не разными значениями), они извлекаются только один раз.

Установите собственный идентификатор для сохранения и обслуживания

Инструмент извлечения angular i18n генерирует файл с записью единицы перевода для каждого атрибута i18n в шаблоне. По умолчанию он присваивает каждой единице перевода уникальный идентификатор, например этот:

    

Когда вы изменяете переводимый текст, средство извлечения генерирует новый идентификатор для этой единицы перевода. Затем вы должны обновить файл перевода с новым идентификатором.

В качестве альтернативы вы можете указать собственный идентификатор в атрибуте i18n, используя префикс @@. В приведенном ниже примере определяется настраиваемый идентификатор IntroductionHeader:

  

Hello i18n!

Когда вы указываете пользовательский идентификатор, средство извлечения и компилятор генерируют единицу перевода с этим пользовательским идентификатором.

    

Пользовательский идентификатор постоянен. Инструмент извлечения не меняет его при изменении переводимого текста. Поэтому обновлять перевод не нужно. Такой подход упрощает обслуживание.

Использование пользовательского идентификатора с описанием

Пользовательский идентификатор можно использовать в сочетании с описание путем включения обоих в значение атрибута i18n. В приведенном ниже примере значение атрибута i18n включает описание, за которым следует пользовательский идентификатор:

  

Привет, i18n!

Вы также можете добавить значение, как показано в этом примере:

  

Здравствуйте, i18n!

Определите уникальные пользовательские идентификаторы

Обязательно укажите уникальные пользовательские идентификаторы. Если вы используете один и тот же идентификатор для двух разных текстовых сообщений, извлекается только первое, а его перевод используется вместо обоих исходных текстовых сообщений.

В приведенном ниже примере пользовательский идентификатор myId равен используется для двух разных сообщений:

  

Hello

До свидания

Рассмотрим перевод на французский язык:

    Hello   Bonjour   

Поскольку пользовательский идентификатор одинаков, оба элементы в итоговом переводе содержат тот же текст, Bonjour:

  

Bonjour

Bonjour

Перевести текст без создания элемента

Если есть фрагмент текста, который вы хотите перевести, вы можете заключить его в тег. Однако, если вы не хотите создавать новый элемент DOM просто для облегчения перевода, вы можете заключить текст в элемент . преобразуется в HTML-комментарий:

   Я не выводю никаких элементов    

Перевести атрибуты

Отображаемый текст иногда предоставляется как значение атрибута, а не как содержимое тега. Например, если в вашем шаблоне есть изображение с атрибутом title, необходимо перевести текстовое значение атрибута title.

    

Чтобы пометить атрибут для перевода, добавьте атрибут в форме i18n-x, где x — имя атрибута для перевода. В следующем примере показано, как пометить атрибут title для перевода, добавив атрибут i18n-title в тег img:

    

Этот метод работает для любого атрибута любого элемента. Вы также можете назначить значение, описание и идентификатор с помощью синтаксиса i18n-x = » | @@ «.

Оцените статью
nanomode.ru
Добавить комментарий