Angular Academy · Aula

Marcando texto para tradução

Use atributos de i18n para marcar textos traduzíveis.

Marcando texto para tradução é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.

O que a internacionalização resolve

A Internacionalização (i18n) consiste em preparar seu aplicativo para que o texto possa ser traduzido para outros idiomas sem alterar o código. O Angular tem um sistema i18n integrado, baseado na marcação do texto traduzível nos modelos com o atributo i18n.

O atributo i18n

Adicione o atributo i18n a qualquer elemento cujo texto deva ser traduzido. O Angular coleta esses textos no momento da compilação e substitui o conteúdo de acordo com a localidade.

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

Traduzindo atributos

Para traduzir um atributo HTML, como title ou placeholder, prefixe-o com i18n-.

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

Significado e descrição

Você pode fornecer contexto aos tradutores com a sintaxe i18n="meaning|description". O significado agrupa frases idênticas que devem compartilhar uma tradução; a descrição explica o uso.

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

IDs personalizados

Adicione um ID personalizado estável depois de @@ para que a tradução sobreviva a edições no texto. Sem ele, alterar o texto de origem gera um novo ID e elimina a tradução existente.

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

Interpolações em texto traduzido

As vinculações dentro do texto traduzido tornam-se marcadores de posição. Os tradutores veem um token nomeado que podem reposicionar de acordo com o idioma.

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

Marcando texto em componentes com $localize

Para textos em TypeScript, e não em modelos, marque-os com $localize. Isso marca o texto para extração, assim como o atributo i18n faz nos modelos.

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

Por que não simplesmente concatenar textos

Codificar e concatenar textos ('You have ' + n + ' items') prejudica a tradução: a ordem das palavras varia conforme o idioma e as regras de plural variam. Marcar frases completas com i18n preserva a gramática para os tradutores.

Traduzindo marcação aninhada

Quando o texto traduzível contém elementos filhos, o Angular os preserva como marcadores de posição para que os tradutores não removam a marcação acidentalmente.

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

Mantendo o texto de origem organizado

Marque o texto na menor unidade adequada, geralmente uma frase completa ou um rótulo. Evite dividir uma frase entre vários blocos i18n, pois cada fragmento se torna uma cadeia separada e mais difícil de traduzir.

O que acontece no momento da compilação

O próprio atributo i18n não gera custo em tempo de execução: o Angular substitui o texto marcado durante a compilação para cada localidade, gerando um pacote otimizado separado. Nas próximas lições, vamos extrair e traduzir essas cadeias.

Verificação rápida

Como você traduz um atributo placeholder?

Recapitulação

Marque o texto do modelo com o atributo i18n e os atributos com i18n-attr. Adicione meaning|description para fornecer contexto e @@customId para obter IDs estáveis. As vinculações tornam-se marcadores de posição, e as cadeias TypeScript usam $localize. A marcação não gera nenhum custo em tempo de execução.

Perguntas Frequentes

A aula “Marcando texto para tradução” é grátis?

Sim — o texto completo de “Marcando texto para tradução” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.

O que vou aprender em “Marcando texto para tradução”?

Use atributos de i18n para marcar textos traduzíveis. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Angular Academy?

Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Marcando texto para tradução”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Angular Academy?

Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Angular Academy