Angular Academy · Урок

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

Создавайте и заполняйте файлы переводов

«Извлечение и перевод сообщений» — бесплатный урок Angular Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

От помеченного текста к файлам переводов

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

Запуск ng extract-i18n

Команда CLI ng extract-i18n сканирует приложение в поисках помеченных сообщений и записывает исходный файл перевода (по умолчанию messages.xlf).

ng extract-i18n
# generates messages.xlf in the project root

Выбор формата и пути вывода

Вы можете выбрать формат и место назначения. XLIFF (xlf) используется по умолчанию; также поддерживаются XLIFF 2 и основанный на JSON формат arb.

ng extract-i18n --format=xlf2 --output-path=src/locale

Структура файла XLF

Каждое помеченное сообщение становится элементом trans-unit с элементом source (исходным текстом) и пустым элементом target, который заполняет переводчик.

<trans-unit id="homeTitle" datatype="html">
  <source>Welcome to our store</source>
  <target></target>
</trans-unit>

Создание файлов для отдельных языковых стандартов

Скопируйте messages.xlf в отдельный файл для каждого целевого языкового стандарта, назвав файл его кодом, а затем переведите целевые тексты.

src/locale/messages.xlf       # source
src/locale/messages.fr.xlf    # French
src/locale/messages.es.xlf    # Spanish

Заполнение переводов

Переводчик заменяет каждый пустой элемент target локализованным текстом, сохраняя тот же id, чтобы Angular понимал, какому исходному тексту он соответствует.

<trans-unit id="homeTitle">
  <source>Welcome to our store</source>
  <target>Bienvenue dans notre boutique</target>
</trans-unit>

Заполнители необходимо сохранять

Интерполяции представлены тегами-заполнителями <x>. Переводчики должны сохранять их, но могут менять их порядок в соответствии с грамматикой целевого языка.

<source>Hello, <x id="INTERPOLATION" equiv-text="{{name}}"/>!</source>
<target>Bonjour, <x id="INTERPOLATION"/> !</target>

Повторное извлечение после изменений

После добавления или изменения помеченного текста снова запустите ng extract-i18n. Пользовательские идентификаторы @@ сохраняют существующие переводы; автоматически созданные идентификаторы могут измениться, и текст потребуется перевести заново.

Настройка языковых стандартов в angular.json

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

"i18n": {
  "sourceLocale": "en",
  "locales": {
    "fr": "src/locale/messages.fr.xlf",
    "es": "src/locale/messages.es.xlf"
  }
}

Обработка отсутствующих переводов

Вы можете указать, как сборка должна обрабатывать непереведённые сообщения: error прерывает сборку, warning записывает предупреждение и использует исходный текст, а ignore ничего не сообщает. Используйте error в CI, чтобы выявлять пропуски.

"options": { "i18nMissingTranslation": "error" }

Работа с инструментами перевода

XLIFF — отраслевой стандарт, поэтому профессиональные платформы перевода (а также такие инструменты, как Crowdin или Lokalise) могут импортировать извлечённый файл и экспортировать готовые переводы обратно в том же формате.

Быстрая проверка

Что создаёт ng extract-i18n?

Итоги

Запустите ng extract-i18n, чтобы собрать помеченный текст в исходный файл XLIFF с элементами trans-unit. Скопируйте его для каждого языкового стандарта, заполните элементы target, сохраняя заполнители, зарегистрируйте языковые стандарты в angular.json и задайте i18nMissingTranslation, чтобы выявлять пропуски. Стабильные идентификаторы @@ защищают переводы от изменений.

Часто задаваемые вопросы

Урок «Извлечение и перевод сообщений» бесплатный?

Да — полный текст урока «Извлечение и перевод сообщений» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «Извлечение и перевод сообщений»?

Создавайте и заполняйте файлы переводов Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Angular Academy?

Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Извлечение и перевод сообщений»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Angular Academy?

Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Angular Academy