Подготовка приложения к локализации

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

Разметка для локализации

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

<h1 i18n="@@homepageTitle">Главная страница</h1>
<p i18n>Добро пожаловать на сайт.</p>

Атрибут @@homepageTitle задает уникальный идентификатор для конкретного сообщения, что упрощает работу переводчиков и поддержание консистентности.

Извлечение сообщений для перевода

Angular CLI предоставляет команду для извлечения текстов:

ng extract-i18n

Результатом будет файл messages.xlf (или другой формат XLIFF), содержащий все строки с атрибутом i18n. Этот файл используется для работы с переводчиками или сторонними сервисами локализации.

Подключение языковых файлов

После получения перевода необходимо подключить соответствующий файл к сборке:

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

При сборке можно указать язык:

ng build --localize

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

Динамическая смена языка

Для динамического переключения языков рекомендуется использовать библиотеку @ngx-translate/core. Она позволяет загружать JSON-файлы с переводами и изменять язык в рантайме без перезагрузки приложения:

import { TranslateService } from '@ngx-translate/core';

constructor(private translate: TranslateService) {
  translate.setDefaultLang('ru');
}

switchLanguage(lang: string) {
  this.translate.use(lang);
}

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

Оглавление