Подготовка компонента к переводу¶

28.02.2022

Чтобы подготовить проект к переводу, выполните следующие действия.

• Используйте атрибут i18n для маркировки текста в шаблонах компонентов
• Используйте атрибут i18n- для маркировки текстовых строк атрибутов в шаблонах компонентов
• Используйте строку сообщения с меткой $localize для пометки текстовых строк в коде компонента

Пометить текст в шаблоне компонента¶

В шаблоне компонента метаданные i18n являются значением атрибута i18n.

1
2
3

<element i18n="{i18n_metadata}"
    >{string_to_translate}</element
>

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

i18n пример¶

Следующий тег <h1> отображает простое приветствие на английском языке "Hello i18n!".

1

<h1>Hello i18n!</h1>

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

1

<h1 i18n>Hello i18n!</h1>

Перевод встроенного текста без элемента HTML¶

Используйте элемент <ng-container>, чтобы связать поведение перевода для определенного текста, не изменяя способ отображения текста.

1

<ng-container i18n>I don't output any element</ng-container>

Пометить атрибуты элементов для перевода¶

В шаблоне компонента метаданные i18n являются значением атрибута i18n-{attribute_name}.

1
2
3
4

<element
    i18n-{attribute_name}="{i18n_metadata}"
    {attribute_name}="{attribute_value}"
/>

Атрибуты элементов HTML включают текст, который должен быть переведен вместе с остальным отображаемым текстом в шаблоне компонента.

Используйте i18n-{attribute_name} с любым атрибутом любого элемента и замените {attribute_name} на имя атрибута. Используйте следующий синтаксис для присвоения значения, описания и пользовательского идентификатора.

1

i18n-{attribute_name}="{meaning}|{description}@@{id}"

i18n-title пример¶

Чтобы перевести название изображения, рассмотрите этот пример. В следующем примере отображается изображение с атрибутом title.

1

<img [src]="logo" title="Angular logo" alt="Angular logo" />

Чтобы пометить атрибут title для перевода, выполните следующие действия.

1. Добавьте атрибут i18n-title.

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

   1 2 3 4 5 6

   <img [src]="logo" i18n-title title="Angular logo" alt="Angular logo" />

Mark text in component code¶

В коде компонента исходный текст перевода и метаданные окружены символами обратного знака (`).

Используйте строку сообщения с меткой $localize, чтобы пометить строку в коде для перевода.

1

$localize `string_to_translate`;

Метаданные i18n окружены символами двоеточия (:) и дополняют исходный текст перевода.

1

$localize `:{i18n_metadata}:string_to_translate`

Включить интерполированный текст¶

Включение интерполяции в строку сообщения с меткой $localize.

1

$localize `string_to_translate ${variable_name}`;

Имя интерполяционного держателя¶

1

$localize `string_to_translate ${variable_name}:placeholder_name:`;

i18n метаданные для перевода¶

1

{meaning}|{description}@@{custom_id}

Следующие параметры обеспечивают контекст и дополнительную информацию, чтобы ваш переводчик не запутался.

Дополнительные сведения о пользовательских идентификаторах см. в разделе Управление отмеченным текстом с помощью пользовательских идентификаторов.

Добавляйте полезные описания и значения¶

Чтобы точно перевести текстовое сообщение, предоставьте переводчику дополнительную информацию или контекст.

Добавьте описание текстового сообщения в качестве значения атрибута i18n или $localize маркированной строки сообщения.

В следующем примере показано значение атрибута i18n.

1
2
3

<h1 i18n="An introduction header for this sample">
    Hello i18n!
</h1>

Следующий пример показывает значение строки сообщения с меткой $localize с описанием.

1

$localize `:An introduction header for this sample:Hello i18n!`;

Переводчику также может понадобиться знать смысл или намерение текстового сообщения в данном конкретном контексте приложения, чтобы перевести его так же, как и другой текст с тем же смыслом. Начните значение атрибута i18n со значения meaning и отделите его от description символом |: {meaning}|{description}.

h1 пример¶

Например, вы можете указать, что тег <h1> является заголовком сайта, который нужно перевести одинаково, независимо от того, используется ли он в качестве заголовка или является ссылкой в другом разделе текста.

В следующем примере показано, как указать, что тег <h1> должен быть переведен как заголовок или как ссылка в другом месте.

1
2
3
4
5

<h1
    i18n="site header|An introduction header for this sample"
>
    Hello i18n!
</h1>

В результате любой текст, помеченный site header, как значение переводится точно так же.

Следующий пример кода показывает значение строки сообщения с меткой $localize со значением и описанием.

1

$localize `:site header|An introduction header for this sample:Hello i18n!`;

Выражения ICU¶

Выражения ICU помогают отметить альтернативный текст в шаблонах компонентов для выполнения условий. Выражение ICU включает свойство компонента, условие ICU и утверждения case, окруженные символами открытой фигурной скобки ({) и закрытой фигурной скобки (}).

1

{ component_property, icu_clause, case_statements }

Свойство компонента определяет переменную В ICU-клаузе определяется тип условного текста.

Чтобы упростить перевод, используйте Международные компоненты для Юникода (ICU clauses) с регулярными выражениями.

Обозначьте множественное число¶

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

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

1

{ component_property, plural, pluralization_categories }

После категории множественного числа введите текст по умолчанию (English), окруженный символами открытой фигурной скобки ({) и закрытой фигурной скобки (}).

1

pluralization_category { }

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

Если ни одна из категорий множественного числа не совпадает, Angular использует other для стандартного возврата к отсутствующей категории.

1

other { default_quantity }

1
2
3
4
5
6

function plural(n: number): number {
    let i = Math.floor(Math.abs(n)),
        v = n.toString().replace(/^[^.]*\.?/, '').length;
    if (i === 1 && v === 0) return 1;
    return 5;
}

minutes пример¶

Если вы хотите отобразить следующую фразу на английском языке, где x — число.

1

updated x minutes ago

И вы также хотите отобразить следующие фразы на основе кардинальности x.

1

updated just now

1

updated one minute ago

Используйте HTML-разметку и интерполяцию. Следующий пример кода показывает, как использовать предложение plural для выражения трех предыдущих ситуаций в элементе <span>.

1
2
3
4

<span i18n
    >Updated {minutes, plural, =0 {just now} =1 {one minute
    ago} other {{{minutes}} minutes ago}}</span
>

Просмотрите следующие детали в предыдущем примере кода.

{{minutes}} является интерполяцией.

Отметка альтернатив и вложенных выражений¶

Пункт select отмечает варианты альтернативного текста на основе определенных вами строковых значений.

1

{ component_property, select, selection_categories }

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

После категории выбора введите текст (English), окруженный символами открытой фигурной скобки ({) и закрытой фигурной скобки (}).

1

selection_category { text }

В разных странах существуют разные грамматические конструкции, что увеличивает сложность перевода. Используйте HTML-разметку.

Если ни одна из категорий выбора не совпадает, Angular использует other для стандартного возврата к отсутствующей категории.

1

other { default_value }

gender пример¶

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

1

The author is other

И вы также хотите отобразить следующие фразы на основе свойства gender компонента.

1

The author is female

1

The author is male

Следующий пример кода показывает, как связать свойство gender компонента и использовать предложение select для выражения трех предыдущих ситуаций в элементе <span>.

Свойство gender связывает выходы с каждым из следующих строковых значений.

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

1
2
3
4

<span i18n
    >The author is {gender, select, male {male} female
    {female} other {other}}</span
>

gender и minutes примеры¶

Объединяйте различные предложения вместе, например, предложения plural и select. Следующий пример кода показывает вложенные предложения, основанные на примерах gender и minutes.

1
2
3
4
5

<span i18n
    >Updated: {minutes, plural, =0 {just now} =1 {one minute
    ago} other {{{minutes}} minutes ago by {gender, select,
    male {male} female {female} other {other}}}}
</span>

Что дальше¶

• Работа с файлами переводов

Комментарии