Angular Academy · Урок

Разметка текста для перевода

Используйте атрибуты i18n, чтобы отметить переводимый текст

Урок 1 из 413 шагов

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

Что решает интернационализация

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

Атрибут i18n

Добавьте атрибут i18n к любому элементу, текст которого должен переводиться. Angular собирает такие элементы во время сборки и заменяет содержимое для каждого языкового стандарта.

<h1 i18n>Welcome to our store</h1>
<p i18n>Choose a product to begin.</p>

Перевод атрибутов

Чтобы перевести атрибут HTML (например, title или placeholder), добавьте перед его именем префикс i18n-.

<input placeholder="Search" i18n-placeholder />
<img src="logo.png" alt="Company logo" i18n-alt />

Значение и описание

Вы можете предоставить переводчикам контекст с помощью синтаксиса i18n="meaning|description". Значение объединяет одинаковые фразы, для которых нужен один перевод, а описание объясняет способ использования.

<button i18n="cta|The main call to action on the home page">Get started</button>

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

Добавьте стабильный пользовательский идентификатор после @@, чтобы перевод сохранялся при изменении текста. Без него изменение исходного текста создаёт новый идентификатор, и существующий перевод теряется.

<h1 i18n="@@homeTitle">Welcome to our store</h1>

Интерполяции в переводимом тексте

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

<p i18n>Hello, {{ name }}! You have {{ count }} new messages.</p>

Пометка текста в компонентах с помощью $localize

Для строк в TypeScript (не в шаблонах) добавьте тег $localize. Он помечает строку для извлечения так же, как атрибут i18n помечает строки в шаблонах.

const greeting = $localize('Welcome back'); // tagged-template form, marked for extraction

Почему не стоит просто объединять строки

Жёстко заданный и объединённый текст ('You have ' + n + ' items') нарушает перевод: порядок слов различается в разных языках, а правила образования множественного числа неодинаковы. Пометка целых фраз атрибутом i18n позволяет переводчикам сохранить грамматическую структуру.

Перевод вложенной разметки

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

<p i18n>Read our <a href="/terms">terms of service</a> before continuing.</p>

Сохранение чистоты исходного текста

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

Что происходит во время сборки

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

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

Как перевести атрибут-заполнитель?

Ответь в интерактивном уроке

Итоги

Помечайте текст шаблона атрибутом i18n, а атрибуты — с помощью i18n-attr. Добавляйте meaning|description для контекста и @@customId для стабильных идентификаторов. Привязки превращаются в заполнители, а для строк TypeScript используется $localize. Пометка не создаёт затрат во время выполнения.

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

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

Курсы: 38
Уроки: 144

Начать учиться бесплатно Посмотреть полный курс

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

Урок «Разметка текста для перевода» бесплатный?

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

Чему я научусь в уроке «Разметка текста для перевода»?

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

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

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

Сколько времени занимает урок «Разметка текста для перевода»?

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

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

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

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

← Назад к Angular Academy