Angular i18n пакет

Angular предоставляет встроенный пакет интернационализации @angular/localize для локализации приложений. Он позволяет адаптировать интерфейс под различные языки и регионы без необходимости ручной подстановки строк.

Настройка i18n

  1. Добавление пакета Пакет подключается через Angular CLI:

    ng add @angular/localize

  2. Маркировка строк для перевода Для строк в шаблонах используется атрибут i18n:

    <h1 i18n="site header|Welcome message">Добро пожаловать</h1>

    Атрибут i18n может содержать описание и контекст перевода. Контекст важен для правильного понимания смысла строки переводчиками.

  3. Извлечение сообщений Для генерации файла с исходными строками используется команда:

    ng extract-i18n

    В результате создается файл messages.xlf или messages.xliff, содержащий все строки для перевода.

  4. Добавление переводов Переводчики создают локализованные версии файла messages.[locale].xlf. Затем приложение конфигурируется для использования определенного языка:

    "projects": {
  "my-app": {
    "i18n": {
      "sourceLocale": "ru",
      "locales": {
        "en": "src/locale/messages.en.xlf",
        "fr": "src/locale/messages.fr.xlf"
      }
    }
  }
}

  5. Сборка локализованной версии Angular CLI позволяет собрать приложение сразу для конкретного языка:

    ng build --localize

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

Особенности Angular i18n

  • Поддержка плейсхолдеров и ICU сообщений для сложной локализации чисел, дат и множественного числа.
  • Встроенные пайпы DatePipe, CurrencyPipe, DecimalPipe автоматически используют локаль.
  • Позволяет создавать динамическую локализацию через runtime, но это требует дополнительной настройки.

ICU-сообщения

ICU-сообщения обеспечивают гибкое управление контентом:

<p i18n>
  {count, plural, 
    =0 {Нет сообщений} 
    =1 {Один новый сообщение} 
    other {# новых сообщений}
  }
</p>

Такой подход гарантирует корректное склонение слов и чисел в разных языках.

Временные функции анимаций и пакет i18n — ключевые механизмы Angular для создания динамичных, удобных и мультиязычных приложений. Правильное использование кривых ускорения делает анимации естественными, а локализация через @angular/localize обеспечивает масштабируемость интерфейса на международном уровне.

Оглавление