All for Joomla All for Webmasters
Ionic Framework

Ionic Framework [2|3]: Internacionalizando seu App com ngx-translate

Image result for ngx-translate

Inserir mensagens e labels diretamente no seu código-fonte não é uma boa prática quando há possibilidade de internacionalizar o seu app. A melhor prática é manter os arquivos de tradução separados para cada linguagem, afim de evitar poluir seu código-fonte. Esse post vai servir como guia para internacionalizar o seu app em Ionic [2|3] utilizando o módulo ngx-translate  do angular [2|4]. As traduções são aplicadas tanto para execução no browser quanto para os dispositivos móveis. Tendo em mãos seu projeto a ser internacionalizado, instale o ngx-translate pelo npm:

Vou demonstrar como exemplo a implementação utilizando as linguagens português brasileiro (ptBR) e inglês padrão (en). Para cada linguagem teremos um arquivo JSON indicando as traduções. Para armazenar esses arquivos, vamos criar a pasta src/assets/i18n . O nome da pasta é predefinido e você não pode customizar. Nessa nova pasta, criamos os dois arquivos JSON:

Ionic 2 Internationalization Folder Structure

Estrutura do diretório para internacionalização

O nosso arquivo en.json fica da seguinte forma para o exemplo:


Nosso arquivo ptBR.json deve conter as mesmas chaves, mas com valores traduzidos:


Em seguida, precisamos importar os módulos no arquivo app.module.ts :

Não se esqueça de incluir também os módulos HttpClientModule  e TranslateModule  nos imports do NgModule:

 Você também deve ter notado que a propriedade useFactory  do TranslateModule requer uma factory para carregamento. Essa factory é o TranslateHttpLoader  que é provido pela função HttpLoaderFactory e ele carrega as traduções do caminho /src/assets/i18n/[lang].json . Agora, vamos inicializar o ngx-translate. Primeiramente, no app.component.ts , importe o TranslateService

e faça a injeção no construtor para inicializá-lo, como abaixo:


Nesse caso, inicializamos nossa linguagem como inglês e a definimos como padrão. Neste ponto, a biblioteca já está configurada e executando, e ambos os idiomas estão disponíveis para serem usados na sua aplicação. Abaixo, um exemplo de view que está internacionalizada, baseando-se nos valores de tradução inseridos nos arquivos JSON:

Mas caso queira definir alguma tradução diretamente no typescript, você pode utilizar a função setTranslation :


Ou para recuperar alguma tradução:

Além da boa prática de programação, é importante ter em mente também a qualidade na experiência de usuário. Então ao definir o idioma na inicialização, o recomendável é utilizar o idioma de preferência utilizado pelo usuário em seu navegador. Isso pode ser feito utilizando o módulo Globalization. Em um post futuro vou demonstrar sua utilização. Quaisquer dúvidas ou sugestões, utilize a área de comentários ou entre em contato!

 

Você Também Pode Gostar

Nenhum Comentário

Deixe uma Resposta