Документация

Компонент <t>

Оберните контент в компонент <t>, чтобы перевести его. Исходное содержимое отображается до тех пор, пока перевод не загрузится.

<t>This content will be translated</t>

Текст с привязками тоже работает. Содержимое снова переводится всякий раз, когда оно меняется, например, при изменении name:

<t>Hello {{ name() }}</t>

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

Все переводы, запрошенные одновременно, отправляются в API одним запросом, а переводы кэшируются. Вы можете использовать столько компонентов <t>, сколько захотите.

<mt-translate> работает как альтернативный селектор, а Translate является тем же компонентом, что и T.

Входы

ВводТипОписание
formality'informal' | 'formal'Устанавливает формальность перевода.
idstringПозволяет редактировать это использование текста самостоятельно. Оно не задано в качестве id элемента.
langLanguageПереопределяет установленный язык с помощью provideMagicTranslate.
vRecord<string, unknown>Значения, которые не переведены, в содержимом отмечены как $name. См. раздел Переменные.
<t lang="fr" formality="formal">How are you?</t>

Переменные

Передайте измененные значения, такие как имя или количество, в [v] и укажите их в содержимом как $name:

<t [v]="{ name: user.name, count: unread() }">
  Hi $name, you have $count new messages
</t>

Magic Translate переводит текст вокруг значений один раз, как Hi {0}, you have {1} new messages, и возвращает значения обратно в ваше приложение. Перевод кэшируется и работает для каждого имени и каждого числа, а сами значения никогда не отправляются в Magic Translate. Когда меняются только значения, новый запрос не отправляется.

Значения нумеруются в том порядке, в котором они появились впервые. Перевод позволяет перемещать их туда, где они нужны языку, например {1} neue Nachrichten für {0}.

Текст вокруг значений может содержать HTML, а значения можно сначала отформатировать с помощью pipes:

<t [v]="{ count: cart.items.length, total: cart.total | currency }">
  You have <b>$count items</b> in your cart, totalling <b>$total</b>.
</t>

Несколько правил:

  • Заменяются только клавиши [v], поэтому текст, например $5, остается без изменений. Если две клавиши, например count и counts, начинаются одинаково, выигрывает самая длинная клавиша.
  • Одно и то же имя может появляться несколько раз.
  • Значения вставляются в виде текста, а не в формате HTML. Вместо этого поместите пометку в текст вокруг них: Hi <b>$name</b>.
  • Переменные заменяются только в тексте, а не в таких атрибутах, как href или title.
  • В режиме разработки ключ, который не отображается в тексте, выдает предупреждение, в котором обнаруживаются опечатки.
  • При рендеринге на стороне сервера <t> с [v] на сервере отображается пустым и появляется после запуска приложения в браузере.

В переменных используется $name, а не {name}, потому что Angular читает одну { в шаблоне в качестве начала сообщения ICU, а шаблон не компилируется.

Ограничения

  1. Компоненты Angular нельзя помещать в компонент <t>. Подойдут простые HTML-элементы (см. пример ниже). Переведенная разметка проходит дезинфицирующее средство HTML Angular.
  2. Содержимое компонента <t> не может превышать 10 КБ, что составляет около 5000 символов.
<!-- this is OK, since <a> is a plain HTML element -->
<t>
  <a href="mailto:info@i42.ch">Please send us an email</a>
</t>


<!-- this does NOT work, since <app-button> is an Angular component -->
<t>
  <app-button>Click me</app-button>
</t>

Для перевода атрибутов и других строк используйте t pipe.

ПредыдущееAngularСледующийt pipe