Интернационализация, иногда называемая i18n, – это процесс проектирования и подготовки проекта для использования в разных регионах мира. Локализация – это процесс создания версий вашего проекта для разных регионов. Процесс локализации включает в себя следующие действия. Извлечение текста для перевода на разные языки. Форматирование данных для определенной локали. Локаль определяет регион, в котором люди говорят на определенном языке или варианте языка. Возможные регионы включают страны и географические регионы. Языковой стандарт определяет форматирование и синтаксический анализ следующих сведений. Единицы измерения, включая дату и время, числа и валюты. Переведенные имена, включая часовые пояса, языки и страны.
Общие задачи интернационализации
Используйте следующие задачи Angular для интернационализации вашего проекта. Используйте встроенные конвейеры для отображения дат, чисел, процентов и валют в локальном формате. Отметьте текст в шаблонах компонентов для перевода. Отметьте множественные формы выражений для перевода. Отметьте альтернативный текст для перевод. После того, как вы подготовите свой проект для международной аудитории, используйте Angular CLI для локализации вашего проекта. Выполните следующие задачи, чтобы локализовать проект. Используйте интерфейс командной строки для извлечения отмеченного текста в файл исходного языка. Сделайте копию файла исходного языка для каждого языка и отправьте все файлы перевода переводчику или в службу. Используйте интерфейс командной строки для объединяйте готовые файлы перевода при создании проекта для одной или нескольких локалей. Создайте адаптируемый пользовательский интерфейс для всех целевых локалей, учитывающий различия в интервалах для разных языков.
Добавьте пакет локализации
Чтобы воспользоваться преимуществами локализации Angular, используйте Angular CLI, чтобы добавить пакет @angular/localize в свой проект. Чтобы добавить пакет @angular/localize, используйте следующую команду для обновления package.json и файлы polyfills.ts в вашем проекте.
ng add @angular/localize
Если @angular/localize не установлен и вы пытаетесь собрать локализованную версию своего проекта, Angular CLI выдает ошибку.
Ссылаться на локали по ID
Angular использует идентификатор локали (идентификатор локали Unicode) для поиска правильных данных локали для интернационализации текстовых строк. Идентификатор локали указывает язык, страну и необязательный код для дальнейших вариантов или подразделений. Идентификатор локали состоит из идентификатора языка, символа дефиса (-) и расширения локали.
{language_id}-{locale_extension}
Установите идентификатор исходной локали
Используйте Angular CLI, чтобы установить исходный язык, на котором вы пишете шаблон компонента и код. По умолчанию Angular использует en-US в качестве исходного языкового стандарта вашего проекта. Чтобы изменить исходный языковой стандарт вашего проекта для сборки, выполните следующие действия. .Откройте файл конфигурации сборки рабочей области angular.json. Измените исходную локаль в поле sourceLocale. Добавьте параметр локали в канал, чтобы переопределить текущее значение токена LOCALE_ID. Чтобы заставить валюту использовать американский английский (en-US), используйте следующий формат для CurrencyPipe
{{ amount | currency : 'en-US' }}
Подготовить компонент к переводу
Пометить текст в шаблоне компонента
В шаблоне компонента метаданные i18n являются значением атрибута i18n.
<element i18n="{i18n_metadata}">{string_to_translate}</element>
Используйте атрибут i18n, чтобы пометить статическое текстовое сообщение в шаблонах компонентов для перевода. Поместите его в каждый тег элемента, который содержит фиксированный текст, который вы хотите перевести. Атрибут i18n — это настраиваемый атрибут, который распознают инструменты и компиляторы Angular.
Пометить атрибуты элемента для перевода
В шаблоне компонента метаданные i18n — это значение атрибута i18n-{attribute_name}.
<element i18n-{attribute_name}="{i18n_metadata}" {attribute_name}="{attribute_value}" />
Атрибуты HTML-элементов включают текст, который должен быть переведен вместе с остальным отображаемым текстом в шаблоне компонента. Используйте i18n-{attribute_name} с любым атрибутом любого элемента и замените {attribute_name} именем атрибута. Используйте следующий синтаксис для назначить значение, описание и пользовательский идентификатор.
i18n-{attribute_name}="{meaning}|{description}@@{id}"
пример i18n-заголовка
Чтобы перевести название изображения, просмотрите этот пример. В следующем примере отображается изображение с атрибутом title.
<img [src]="logo" title="Angular logo" alt="Angular logo">
Чтобы пометить атрибут title для перевода, выполните следующее действие. Добавьте атрибут i18n-title. В следующем примере показано, как пометить атрибут title в теге img, добавив i18n-title.
<img [src]="logo" i18n-title title="Angular logo" alt="Angular logo"/>
Пометить текст в коде компонента
В коде компонента исходный текст перевода и метаданные окружены символами обратной кавычки (`). Используйте строку сообщения с тегом $localize, чтобы пометить строку в коде для перевода.
$localize `string_to_translate`;
Метаданные i18n окружены символами двоеточия (:) и предшествуют исходному тексту перевода.
$localize `:{i18n_metadata}:string_to_translate`
Включить интерполированный текст
Включить интерполяции в строку сообщения с тегом $localize.
$localize `string_to_translate ${variable_name}`;
Назовите заполнитель интерполяции
$localize `string_to_translate ${variable_name}:placeholder_name:`;
метаданные i18n для перевода
{meaning}|{description}@@{custom_id}
Пользовательский идентификатор: Укажите пользовательский идентификатор
Описание: Укажите дополнительную информацию или контекст
Значение: Укажите значение или цель текста в определенном контексте
Добавьте полезные описания и значения
Для точного перевода текстового сообщения предоставьте переводчику дополнительную информацию или контекст. Добавьте описание текстового сообщения в качестве значения атрибута i18n или строки сообщения с тегом $localize. В следующем примере показано значение атрибута i18n.
<h1 i18n="An introduction header for this sample">Hello i18n!</h1>
В следующем примере показано значение строки сообщения с тегом $localize с описанием.
$localize `:An introduction header for this sample:Hello i18n!`;
Переводчику также может потребоваться знать значение или назначение текстового сообщения в данном конкретном контексте приложения, чтобы перевести его так же, как и другой текст с таким же значением. Начните значение атрибута i18n со значения и отделите его от описания символом | символ: {значение}|{описание}.
пример h1
Например, вы можете указать, что тег ‹h1› является заголовком сайта, который необходимо перевести одинаково, независимо от того, используется ли он в качестве заголовка или упоминается в другом разделе текста. В следующем примере показано, как указать, что тег Тег ‹h1› должен быть переведен как заголовок или указан в другом месте.
<h1 i18n="site header|An introduction header for this sample">Hello i18n!</h1>
В результате получается любой текст, помеченный шапкой сайта, так как смысл переводится точно так же.
В следующем примере кода показано значение строки сообщения с тегом $localize со значением и описанием.
$localize `:site header|An introduction header for this sample:Hello i18n!`;
Инструмент извлечения Angular создает запись единицы перевода для каждого атрибута i18n в шаблоне. Инструмент извлечения Angular присваивает каждой единице перевода уникальный идентификатор на основе значения и описания. Одни и те же текстовые элементы с разными значениями извлекаются с разными идентификаторами. Например, если слово «правильное» использует следующие два определения в двух разных местах, слово переводится по-разному и объединяется обратно в приложение как разные записи перевода. правильно, как в случае «вы правы».
направление, как в случае «поверните направо». Если одни и те же текстовые элементы соответствуют следующим условиям, текстовые элементы извлекаются только один раз и используют один и тот же идентификатор. То же значение или определение. описания.
выражения интенсивной терапии
Выражения ICU помогают помечать альтернативный текст в шаблонах компонентов для выполнения условий. Выражение ICU включает в себя свойство компонента, предложение ICU и операторы case, заключенные в открывающую фигурную скобку ({) и закрывающую фигурную скобку (}).
{ component_property, icu_clause, case_statements }
Свойство компонента определяет переменную. Предложение ICU определяет тип условного текста.
ICU: ДЕТАЛИ ПУНКТА
множественное число: отметьте использование множественного числа
select: отметьте варианты для альтернативного текста на основе определенных вами строковых значений.
Отметить множественное число
Разные языки имеют разные правила формирования множественного числа, что усложняет перевод. Поскольку в других локалях число элементов выражается по-разному, вам может потребоваться установить категории множественного числа, не соответствующие английскому языку. Используйте множественное число для обозначения выражений, которые могут не иметь смысла при дословном переводе.
{ component_property, plural, pluralization_categories }
КАТЕГОРИЯ МНОЖЕСТВА: ДЕТАЛИ: ПРИМЕР
ноль: количество равно нулю: =0 { }, ноль { }
один: Количество равно 1: =1 {}, один {}
два: Количество равно 2: =2 { }, два { }
немного: Количество 2 или больше: несколько { }
много: количество большое число: много { }
другое: количество по умолчанию: другое { }
Если ни одна из категорий множественного числа не соответствует, Angular использует other для соответствия стандартному запасному варианту для отсутствующей категории.
other { default_quantity }
ОБЩАЯ ИНФОРМАЦИЯ: ЯЗЫКИ МОГУТ НЕ ПОДДЕРЖИВАТЬ НЕКОТОРЫЕ КАТЕГОРИИ МНОЖЕСТВА
Многие локали не поддерживают некоторые категории множественного числа. Локаль по умолчанию (en-US) использует очень простую функцию plural(), которая не поддерживает категорию множественного числа few. Еще одна локаль с простой функцией множественного числа() — es. В следующем примере кода показана функция en-USplural().
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;
}
Функция множественного числа() возвращает только 1 (один) или 5 (другой). Немногие категории никогда не совпадают.
пример минут
Если вы хотите отобразить следующую фразу на английском языке, где x — число.
updated x minutes ago
И вы также хотите отобразить следующие фразы на основе кардинальности x.
updated just now updated one minute ago
Используйте HTML-разметку и интерполяции. В следующем примере кода показано, как использовать предложение множественного числа для выражения предыдущих трех ситуаций в элементе ‹span›.
<span i18n>Updated {minutes, plural, =0 {just now} =1 {one minute ago} other {{{minutes}} minutes ago}}</span>
Просмотрите следующие сведения в предыдущем примере кода.
ПАРАМЕТРЫ: ПОДРОБНОСТИ
минуты: первый параметр указывает, что свойство компонента — минуты, и определяет количество минут.
множественное число: второй параметр указывает, что предложение ICU является множественным.
=0 {только что }: для нулевых минут категория множественного числа равна =0. Значение только что.
=1 {одна минута}: для одной минуты категория множественного числа равна =1. Значение равно одной минуте.
другое {{{minutes}} минут назад}: для любой непревзойденной кардинальности категория множественного числа по умолчанию — другое. Значение равно {{minutes}} минут назад.
{{минуты}} – это интерполяция.
Отметить альтернативы и вложенные выражения
Предложение select отмечает варианты альтернативного текста на основе определенных вами строковых значений.
{ component_property, select, selection_categories }
Переведите все варианты, чтобы отобразить альтернативный текст на основе значения переменной.
После категории выбора введите текст (на английском языке), заключенный в открывающую фигурную скобку ({) и закрывающую фигурную скобку (}).
selection_category { text }
Различные локали имеют разные грамматические конструкции, которые усложняют перевод. Используйте HTML-разметку. Если ни одна из категорий выбора не соответствует, Angular использует другую, чтобы соответствовать стандартному запасному варианту для отсутствующей категории.
other { default_value }
пример пола
Если вы хотите отобразить следующую фразу на английском языке.
The author is other
И вы также хотите отобразить следующие фразы на основе гендерного свойства компонента.
The author is female The author is male
В следующем примере кода показано, как связать свойство gender компонента и использовать предложение select для выражения предыдущих трех ситуаций в элементе <span>.
Свойство гендера связывает выходные данные с каждым из следующих строковых значений.
ЗНАЧЕНИЕ: АНГЛИЙСКОЕ ЗНАЧЕНИЕ
женский: женский
мужской: мужской
другое: другое
Предложение select сопоставляет значения с соответствующими переводами. В следующем примере кода показано свойство гендера, используемое с предложением select.
<span i18n>The author is {gender, select, male {male} female {female} other {other}}</span>
пример пола и минут
Объединяйте разные предложения вместе, например, множественное число и предложения выбора. В следующем примере кода показаны вложенные предложения на основе примеров пола и минут.
<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>
Работа с файлами перевода
После того, как вы подготовите компонент к переводу, используйте команду extract-i18n Angular CLI, чтобы извлечь отмеченный текст в компоненте в файл исходного языка. Выделенный текст включает текст, помеченный i18n, атрибуты, помеченные атрибутом i18n, атрибуты, помеченные атрибутом i18n, и текст, помеченный $localize, как описано в разделе Подготовка компонента к переводу. Выполните следующие шаги, чтобы создать и обновить файлы перевода для вашего проекта.
Извлеките файл исходного языка
Чтобы извлечь файл исходного языка, выполните следующие действия. Откройте окно терминала. Перейдите в корневой каталог вашего проекта. Выполните следующую команду CLI.
ng extract-i18n
Команда Extract-i18n создает файл исходного языка с именем messages.xlf в корневом каталоге вашего проекта. Для получения дополнительной информации о формате файла обмена XML-локализацией (XLIFF, версия 1.2) см. XLIFF. Используйте следующие параметры команды extract-i18n, чтобы изменить расположение, формат и имя файла исходного языка.
КОМАНДА: ОПЦИИ ДЕТАЛИ
— format: Установить формат выходного файла
— out-file: Установить имя выходного файла
— output-path: Установить путь к выходному каталогу
Создайте файл перевода для каждого языка
Чтобы создать файл перевода для локали или языка, выполните следующие действия. Извлеките файл исходного языка. Сделайте копию файла исходного языка, чтобы создать файл перевода для каждого языка. Переименуйте файл перевода, чтобы добавить локаль.
messages.xlf --> message.{locale}.xlf
Создайте новый каталог в корне вашего проекта с именем locale.
src/locale
Переместите файл перевода в новый каталог. Отправьте файл перевода своему переводчику. Повторите вышеуказанные шаги для каждого языка, который вы хотите добавить в свое приложение.
Переведите каждый файл перевода
Если вы не владеете языком свободно и у вас нет времени редактировать переводы, вы, скорее всего, выполните следующие шаги. Отправьте каждый файл перевода переводчику. Переводчик использует редактор файлов XLIFF для выполнения следующих действий. Создайте перевод. Отредактируйте перевод.
Пример процесса перевода для французского языка
Например, в файле messages.fr.xlf найдите первый элемент ‹trans-unit›. Это единица перевода, также известная как текстовый узел, который представляет собой перевод, например, приветственного тега ‹h1›, ранее отмеченного атрибутом i18n.
<trans-unit id="introductionHeader" datatype="html"> <source>Hello i18n!</source> <note priority="1" from="description">An introduction header for this sample</note> <note priority="1" from="meaning">User welcome</note> </trans-unit>
id="introductionHeader" — это настраиваемый идентификатор, но без префикса @@, необходимого в исходном HTML. Дублируйте элемент ‹source›… ‹/source› в текстовом узле, переименуйте его в target, а затем замените содержимое текстом на французском языке.
<trans-unit id="introductionHeader" datatype="html"> <source>Hello i18n!</source> <target>Bonjour i18n !</target> <note priority="1" from="description">An introduction header for this sample</note> <note priority="1" from="meaning">User welcome</note> </trans-unit>
В более сложном переводе информация и контекст в элементах описания и значения помогают выбрать правильные слова для перевода. Переведите другие текстовые узлы. В следующем примере показан способ перевода.
<trans-unit id="ba0cc104d3d69bf669f97b8d96a4c5d8d9559aa3" datatype="html"> <source>I don't output any element</source> <target>Je n'affiche aucun élément</target> </trans-unit> <trans-unit id="701174153757adf13e7c24a248c8a873ac9f5193" datatype="html"> <source>Angular logo</source> <target>Logo d'Angular</target> </trans-unit>
Не меняйте идентификаторы единиц перевода. Каждый атрибут id генерируется Angular и зависит от содержимого текста компонента и назначенного значения. Если вы измените либо текст, либо значение, то атрибут id изменится. Дополнительные сведения об управлении обновлениями текста и идентификаторами см. в разделе Пользовательские идентификаторы.
Перевести множественное число
Чтобы перевести множественное число, переведите значения соответствия формата ICU. только что
одну минуту назад. ‹x id="INTERPOLATION" equiv-text="{{minutes}}"/› минут назад. В следующем примере показан способ перевода.
<trans-unit id="5a134dee893586d02bffc9611056b9cadf9abfad" datatype="html">
<source>{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {<x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes ago} }</source>
<target>{VAR_PLURAL, plural, =0 {à l'instant} =1 {il y a une minute} other {il y a <x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes} }</target>
</trans-unit>
Перевести альтернативные выражения
Angular также извлекает альтернативные выражения выбора ICU как отдельные единицы перевода.
пример выбора пола
В следующем примере показано выражение select ICU в шаблоне компонента.
<span i18n>The author is {gender, select, male {male} female {female} other {other}}</span>
В этом примере Angular извлекает выражение в две единицы перевода. Первый содержит текст за пределами предложения select и использует заполнитель для выбора (‹x id="ICU"›):
<trans-unit id="f99f34ac9bd4606345071bd813858dec29f3b7d1" datatype="html">
<source>The author is <x id="ICU" equiv-text="{gender, select, male {...} female {...} other {...}}"/></source>
<target>L'auteur est <x id="ICU" equiv-text="{gender, select, male {...} female {...} other {...}}"/></target>
</trans-unit>
При переводе текста переместите заполнитель, если необходимо, но не удаляйте его. Если вы удалите заполнитель, выражение ICU будет удалено из вашего переведенного приложения. В следующем примере отображается вторая единица перевода, содержащая предложение select.
<trans-unit id="eff74b75ab7364b6fa888f1cbfae901aaaf02295" datatype="html">
<source>{VAR_SELECT, select, male {male} female {female} other {other} }</source>
<target>{VAR_SELECT, select, male {un homme} female {une femme} other {autre} }</target>
</trans-unit>
В следующем примере отображаются обе единицы перевода после завершения перевода.
<trans-unit id="f99f34ac9bd4606345071bd813858dec29f3b7d1" datatype="html">
<source>The author is <x id="ICU" equiv-text="{gender, select, male {...} female {...} other {...}}"/></source>
<target>L'auteur est <x id="ICU" equiv-text="{gender, select, male {...} female {...} other {...}}"/></target>
</trans-unit>
<trans-unit id="eff74b75ab7364b6fa888f1cbfae901aaaf02295" datatype="html">
<source>{VAR_SELECT, select, male {male} female {female} other {other} }</source>
<target>{VAR_SELECT, select, male {un homme} female {une femme} other {autre} }</target>
</trans-unit>
Преобразовать вложенные выражения
Angular обрабатывает вложенное выражение так же, как альтернативное выражение. Angular извлекает выражение в две единицы перевода.
Пример вложенного множественного числа
В следующем примере отображается первая единица перевода, содержащая текст за пределами вложенного выражения.
<trans-unit id="972cb0cf3e442f7b1c00d7dab168ac08d6bdf20c" datatype="html">
<source>Updated: <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/></source>
<target>Mis à jour: <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/></target>
</trans-unit>
В следующем примере отображается вторая единица перевода, содержащая полное вложенное выражение.
<trans-unit id="7151c2e67748b726f0864fc443861d45df21d706" datatype="html">
<source>{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {<x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes ago by {VAR_SELECT, select, male {male} female {female} other {other} }} }</source>
<target>{VAR_PLURAL, plural, =0 {à l'instant} =1 {il y a une minute} other {il y a <x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes par {VAR_SELECT, select, male {un homme} female {une femme} other {autre} }} }</target>
</trans-unit>
В следующем примере отображаются обе единицы перевода после перевода.
<trans-unit id="972cb0cf3e442f7b1c00d7dab168ac08d6bdf20c" datatype="html">
<source>Updated: <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/></source>
<target>Mis à jour: <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/></target>
</trans-unit>
<trans-unit id="7151c2e67748b726f0864fc443861d45df21d706" datatype="html">
<source>{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {<x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes ago by {VAR_SELECT, select, male {male} female {female} other {other} }} }</source>
<target>{VAR_PLURAL, plural, =0 {à l'instant} =1 {il y a une minute} other {il y a <x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes par {VAR_SELECT, select, male {un homme} female {une femme} other {autre} }} }</target>
</trans-unit>
Объединить переводы в приложение
Чтобы объединить выполненные переводы в ваш проект, выполните следующие действия. Используйте Angular CLI для создания копии распространяемых файлов вашего проекта. Используйте опцию «localize», чтобы заменить все сообщения i18n действительными переводами и создать локализованный вариант приложения. Вариант приложения — это полная копия распространяемых файлов вашего приложения, переведенная для одной локали. После объединения переводов обслуживайте каждую распространяемую копию приложения, используя определение языка на стороне сервера или разные подкаталоги.
Определить локали в конфигурации сборки
Используйте параметр проекта i18n в файле конфигурации сборки рабочей области angular.json вашего проекта, чтобы определить локали для проекта. Следующие подпараметры определяют исходный язык и сообщают компилятору, где найти поддерживаемые переводы для проекта.
ПОДОПЦИЯ: ПОДРОБНОСТИ
sourceLocale: языковой стандарт, который вы используете в исходном коде приложения (по умолчанию en-US)
locales: сопоставление идентификаторов языковых стандартов с файлами перевода
angular.json для примера en-US и fr
Например, в следующем фрагменте файла конфигурации сборки рабочей области angular.json в качестве исходного языкового стандарта указывается en-US и предоставляется путь к файлу перевода французского (fr) языкового стандарта.
"projects": {
"angular.io-example": {
// ...
"i18n": {
"sourceLocale": "en-US",
"locales": {
"fr": {
"translation": "src/locale/messages.fr.xlf",
// ...
}
}
},
"architect": {
// ...
}
}
}
}
Создание вариантов приложения для каждой локали
Чтобы использовать определение локали в конфигурации сборки, используйте параметр «localize» в файле конфигурации сборки рабочей области angular.json, чтобы указать CLI, какие локали генерировать для конфигурации сборки. Установите для «localize» значение true для всех локалей, ранее определенных в конфигурации сборки. Установите «localize» в массив подмножества ранее определенных идентификаторов локали, чтобы построить только эти версии локалей. Установите для параметра «localize» значение false, чтобы отключить локализацию и не создавать версии для конкретной локали. Из-за сложности развертывания i18n и необходимости минимизировать время перестроения сервер разработки поддерживает локализацию только одной локали за раз. Если вы установите для параметра «localize» значение true, определите более одной локали и используйте ng serve; то возникает ошибка. Если вы хотите разрабатывать для определенной локали, установите параметр «localize» для конкретной локали. Например, для французского (fr) укажите «localize»: [«fr»]. Интерфейс командной строки загружает и регистрирует данные локали, помещает каждую сгенерированную версию в каталог для конкретной локали, чтобы отделить ее от других версий локали, и помещает каталоги в настроенный выходной путь для проекта. Для каждого варианта приложения атрибут lang элемента html устанавливается на языковой стандарт. Интерфейс командной строки также настраивает базовый HREF HTML для каждой версии приложения, добавляя языковой стандарт к настроенному baseHref. Установите свойство «localize» в качестве общей конфигурации для эффективного наследования для всех конфигураций. Кроме того, установите свойство для переопределения других конфигураций.
angular.json включает все локали из примера сборки
В следующем примере отображается параметр «localize», для которого установлено значение true в файле конфигурации сборки рабочей области angular.json, так что создаются все локали, определенные в конфигурации сборки.
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"localize": true,
// ...
},
Сборка из командной строки
Кроме того, используйте параметр —localize с командой ng build и вашей существующей производственной конфигурацией. CLI создает все локали, определенные в конфигурации сборки. Если вы устанавливаете локали в конфигурации сборки, это похоже на то, когда вы устанавливаете для параметра «localize» значение true.
ng build --localize
Применение определенных параметров сборки только для одной локали
Чтобы применить определенные параметры сборки только к одному языковому стандарту, укажите один языковой стандарт для создания пользовательской конфигурации для конкретного языкового стандарта.
сборка для французского примера
В следующем примере показана пользовательская конфигурация для конкретного языкового стандарта с использованием одного языкового стандарта.
"build": {
// ...
"configurations": {
// ...
"fr": {
"localize": ["fr"]
}
},
// ...
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
// ...
"fr": {
"browserTarget": "angular.io-example:build:development,fr"
}
},
// ...
},
// ...
}
Передайте эту конфигурацию командам ng serve или ng build. В следующем примере кода показано, как обслуживать файл французского языка.
ng serve --configuration=fr
Для производственных сборок используйте композицию конфигурации для запуска обеих конфигураций.
ng build --configuration=production,fr
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
// ...
},
"configurations": {
// ...
"fr": {
"localize": ["fr"]
}
},
// ...
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "angular.io-example:build:production"
},
// ...
"fr": {
"browserTarget": "angular.io-example:build:development,fr"
}
},
// ...
},
// ...
}
Сообщить об отсутствующих переводах
Если перевод отсутствует, сборка завершается успешно, но генерируется предупреждение, например «Отсутствует перевод для сообщения «{translation_text}». Чтобы настроить уровень предупреждения, генерируемого компилятором Angular, укажите один из следующих уровней.
УРОВЕНЬ ПРЕДУПРЕЖДЕНИЯ: ПОДРОБНОСТИ: ВЫВОД
ошибка: выдает ошибку, и сборка завершается сбоем :n/a
игнорировать: ничего не делать :n/a
предупреждение: отображает предупреждение по умолчанию в консоли или оболочке :Отсутствует перевод сообщения «{translation_text}»
Укажите уровень предупреждения в разделе параметров для цели сборки вашего файла конфигурации сборки рабочей области angular.json.
пример предупреждения об ошибке angular.json
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
// ...
"i18nMissingTranslation": "error"
},
Когда вы компилируете свой проект Angular в приложение Angular, экземпляры атрибута i18n заменяются экземплярами строки сообщения с тегом $localize. Это означает, что ваше приложение Angular переводится после компиляции. Это также означает, что вы можете создавать локализованные версии своего приложения Angular без повторной компиляции всего проекта Angular для каждой локали. Когда вы переводите свое приложение Angular, преобразование перевода заменяет и переупорядочивает части (статические строки и выражения) литеральной строки шаблона строками из коллекции переводов.
Управление выделенным текстом с помощью пользовательских идентификаторов
Экстрактор Angular создает файл с записью единицы перевода для каждого из следующих экземпляров. Каждый атрибут i18n в шаблоне компонента. Каждая строка сообщения с тегом $localize в коде компонента. Angular присваивает каждой единице перевода уникальный идентификатор. Когда вы меняете переводимый текст, экстрактор генерирует новый идентификатор для этой единицы перевода. В большинстве случаев изменения в исходном тексте также требуют изменения перевода. Таким образом, использование нового идентификатора обеспечивает синхронизацию изменений текста с переводами. Однако некоторые системы перевода требуют для идентификатора определенной формы или синтаксиса. Чтобы выполнить это требование, используйте пользовательский идентификатор для пометки текста. Большинству разработчиков не нужно использовать собственный идентификатор. Если вы хотите использовать уникальный синтаксис для передачи дополнительных метаданных, используйте пользовательский идентификатор. Дополнительные метаданные могут включать библиотеку, компонент или область приложения, в которой отображается текст. Чтобы указать пользовательский идентификатор в атрибуте i18n или в строке сообщения с тегом $localize, используйте префикс @@. В следующем примере определяется пользовательский идентификатор introductionHeader в элементе заголовка.
<h1 i18n="@@introductionHeader">Hello i18n!</h1>
В следующем примере определяется пользовательский идентификатор IntroductionHeader для переменной.
variableText1 = $localize `:@@introductionHeader:Hello i18n!`;
Когда вы указываете пользовательский идентификатор, экстрактор создает единицу перевода с настраиваемым идентификатором.
<trans-unit id="introductionHeader" datatype="html">
Если вы измените текст, экстрактор не изменит идентификатор. В результате вам не нужно делать дополнительный шаг для обновления перевода. Недостаток использования пользовательских идентификаторов заключается в том, что если вы измените текст, ваш перевод может не синхронизироваться с недавно измененным исходным текстом.
Использовать пользовательский идентификатор с описанием
Используйте пользовательский идентификатор в сочетании с описанием и значением, чтобы помочь переводчику. Следующий пример включает описание, за которым следует настраиваемый идентификатор.
<h1 i18n="An introduction header for this sample@@introductionHeader">Hello i18n!</h1>
В следующем примере определяется пользовательский идентификатор и описание для переменной IntroductionHeader.
variableText2 = $localize `:An introduction header for this sample@@introductionHeader:Hello i18n!`;
Следующий пример добавляет смысл.
<h1 i18n="site header|An introduction header for this sample@@introductionHeader">Hello i18n!</h1>
В следующем примере определяется пользовательский идентификатор IntroductionHeader для переменной.
variableText3 = $localize `:site header|An introduction header for this sample@@introductionHeader:Hello i18n!`;
Определение уникальных пользовательских идентификаторов
Не забудьте определить пользовательские идентификаторы, которые являются уникальными. Если вы используете один и тот же идентификатор для двух разных текстовых элементов, инструмент извлечения извлекает только первый, а Angular использует перевод вместо обоих исходных текстовых элементов. Например, в следующем фрагменте кода один и тот же пользовательский идентификатор myId определен для двух разных текстовых элементов.
<h3 i18n="@@myId">Hello</h3> <!-- ... --> <p i18n="@@myId">Good bye</p>
Ниже показан перевод на французский язык.
<trans-unit id="myId" datatype="html"> <source>Hello</source> <target state="new">Bonjour</target> </trans-unit>
Оба элемента теперь используют один и тот же перевод (Bonjour), потому что оба были определены с одним и тем же пользовательским идентификатором.
<h3>Bonjour</h3> <!-- ... --> <p>Bonjour</p>
