O componente <t>

Embrulhe seu conteúdo no componente <t> para traduzi-lo. O conteúdo original é exibido até que a tradução seja carregada.

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

Texto com encadernações também funciona. O conteúdo é traduzido novamente sempre que muda, por exemplo, quando name muda:

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

Para valores que mudam com frequência, como nomes e contagens, use variáveis para que o texto seja traduzido apenas uma vez.

Todas as traduções solicitadas ao mesmo tempo são enviadas para a API em uma única solicitação, e as traduções são armazenadas em cache. Você pode usar quantos componentes <t> quiser.

<mt-translate> funciona como um seletor alternativo e Translate é o mesmo componente que T.

Entradas

<t lang="fr" formality="formal">How are you?</t>

Variáveis

Passe valores que mudam, como um nome ou uma contagem, em [v] e faça referência a eles como $name no conteúdo:

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

Magic Translate traduz o texto em torno dos valores uma vez, como Hi {0}, you have {1} new messages, e coloca os valores de volta no seu aplicativo. A tradução é armazenada em cache e funciona para cada nome e cada contagem, e os valores em si nunca são enviados para Magic Translate. Quando somente os valores mudam, nenhuma nova solicitação é feita.

Os valores são numerados na ordem em que aparecem pela primeira vez. A tradução pode movê-los para onde o idioma precisar deles, por exemplo, {1} neue Nachrichten für {0}.

O texto ao redor dos valores pode conter HTML, e os valores podem ser formatados primeiro com 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>

Algumas regras:

• Somente as teclas de [v] são substituídas, então textos como $5 permanecem como estão. Se duas teclas começarem da mesma forma, como count e counts, a mais longa vence.
• O mesmo nome pode aparecer mais de uma vez.
• Os valores são inseridos como texto, nunca como HTML. Em vez disso, coloque marcação no texto ao redor deles: Hi <b>$name</b>.
• As variáveis são substituídas somente no texto, não em atributos como href ou title.
• No modo de desenvolvimento, uma tecla que não aparece no texto registra um aviso, que detecta erros de digitação.
• Com a renderização do lado do servidor, um <t> com [v] é renderizado vazio no servidor e aparece quando o aplicativo é executado no navegador.

As variáveis usam $name em vez de {name} porque Angular lê um único { em um modelo como o início de uma mensagem ICU e o modelo não é compilado.

Limitações

1. Você não pode colocar componentes Angular dentro do componente <t>. Elementos HTML simples são bons (veja o exemplo abaixo). A marcação traduzida passa pelo desinfetante HTML do Angular.
2. O conteúdo dentro de um componente <t> não pode exceder 10 KB, o que equivale a cerca de 5.000 caracteres.

<!-- 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>

Para traduzir atributos e outras cadeias de caracteres, use o t pipe.