Adicionar suporte a multi-linguagem a angular

Neste tutorial, vamos levá-lo através do processo de tornar o seu aplicativo acessível e amigável para as pessoas ao redor do mundo. Apenas cerca de 20% do mundo fala inglês, portanto, fornecer outras opções de idioma pode melhorar sua experiência do usuário e aumentar muito o alcance do seu aplicativo. Vamos dar uma olhada nas ferramentas de internacionalização integradas da Angular e mostrar-lhe como usá-los corretamente.

Se você estiver construindo um site em vez de um aplicativo, certifique-se de ter seu conjunto de ferramentas corretamente. Veja nossos guias para o melhor Construtor de sites e top hospedagem na web. descobrir mais.

Criamos um aplicativo de demonstração muito simples para demonstrar o processo. Clone isso daqui e depois siga as instruções de instalação.

Inicie o aplicativo para se familiarizar com isso. Apenas exibe e atualiza números aleatórios e valores com diferentes contextos, e. Moedas, datas etc. Nós cobriremos alguns dos tubos e recursos usados ​​durante o tutorial.

• 17 Tutoriais de design responsivos realmente úteis

01. Termos-chave para apoiar idiomas

Há duas palavras que são frequentemente usadas de forma intercambiável ao falar sobre traduzir um aplicativo - internacionalização e localização - no entanto, eles realmente significam coisas ligeiramente diferentes. A internacionalização refere-se ao processo de preparação do seu aplicativo para apoiar diferentes idiomas. Em contraste, a localização refere-se ao processo de tradução do seu aplicativo nos idiomas necessários. Essencialmente, a internacionalização é algo que você faz uma vez por aplicativo, e a localização acontece uma vez por localidade - pelo menos é o plano.

Estes termos também podem estar familiarizados em suas versões encurtadas: i18n (onde 18 é o número de cartas entre o primeiro 'I' e o último 'N' de internacionalização) e l10n (onde 10 é o número de letras entre o 'i' e o 'n' de localização).

02. Qual é a localização?

Há mais de 6.000 idiomas usadas em todo o mundo hoje, a maioria dos quais são usadas apenas por grupos muito pequenos de pessoas. No entanto, mesmo se apenas nos concentrarmos nos três melhores idiomas - Mandarina, Espanhol e Inglês - haverá diferenças significativas na formatação de data, estrutura gramatical, pluralização e formatação de números.

Se incluirmos o quinto idioma mais utilizado - árabe - encontramos outra diferença; O árabe é um roteiro à direita para a esquerda (RTL) que significa que a interface do usuário também terá que ser espelhado.

Portanto, durante a localização, temos que considerar a gramática, layout e diferenças de formatação e, claro, também temos que mudar o texto em si. Angular pode ajudar com grande parte disso, mas você ainda precisará traduzir manualmente o texto (e salvar a tradução em armazenamento na núvem , por isso é seguro e compartilhável com sua equipe).

03. Localidades em Angular

Precisamos localizar para cada local que precisamos apoiar. Uma localidade refere-se ao conjunto geral de preferências para as considerações mencionadas acima que tendem a ser compartilhadas dentro de uma região do mundo, tipicamente um país. Cada local é representado por um identificador de localidade Unicode, que especifica o código de idioma e a extensão da localidade.

A localidade padrão do Angular é 'en-US', que é o código da linguagem 'en' (inglês) como falado na região 'EUA' (Estados Unidos da América). Um aplicativo localizado para 'en-US' será sutilmente diferente de um aplicativo localizado para 'en-GB', que é o inglês como falado na Grã-Bretanha. Por exemplo, nas datas dos EUA são (desconfortantes) formatados mm / dd / aaaa, enquanto aqui no Reino Unido usamos a abordagem dd / mm mais sensata / aaaa. Essa pequena diferença pode resultar em um grande erro de compreensão.

Para tornar as coisas interessantes, vamos localizar nosso aplicativo de demonstração para o árabe como falado no Iraque, também conhecido como "Ar-QI" e inglês, como falado no Reino Unido, também conhecido como "en-GB". Nós usaremos o inglês como o padrão desta vez.

04. Construir configuração

Nosso projeto de demonstração foi criado usando CLI angular, que inclui alguns ferramentas úteis. Vamos usar o compilador à frente do tempo (AOT) para este projeto, portanto, precisamos fazer algumas alterações no arquivo de configuração do CLI: 'Angular.json'. Se você quiser usar just-in-time (jit), você precisa configurar as coisas de forma ligeiramente diferente.

Com um AOT Build, você obtém uma nova aplicação pronta para renderização mais rápida, que carrega sem a necessidade de solicitações assíncronas para buscar coisas como modelos e estilos. Como resultado, você deve criar uma construção para cada local e atender a compilação apropriada usando o URL ou algum tipo de lógica de detecção de idioma do lado do servidor. A abordagem mais simples é criar um diretório para cada local, e. www.example.com/en-gb e www.example.com/ar-iq. O trade off é que você não pode mudar a linguagem na mosca, mas, na realidade, é improvável que seja algo exigido pelos usuários reais.

Primeiro de tudo, precisamos adicionar uma configuração de compilação para nossa localidade árabe. No arquivo JSON, procure o objeto 'Architect.Build.configurações'. Adicione o bloco a seguir para definir uma configuração para a localidade:

 "AR-IQ": {
    "Basehref": "/ ar-q /",
    "Deployurl": "/ ar-q /",
    "SaídaPath": "dist / angular-i18n-demo /
ar-q ",
    "i18nfile": "src / locale / mensagens.ar-q.
xlf ",
    "i18nFormat": "xlf",
    "i18nlocale": "ar-q" 

Essa configuração informa a angular onde emitir a compilação compilada e quais o arquivo e o formato de traduções serão usados. Também define a localidade e informa a angular que diretório o aplicativo será implantado.

Também precisamos modificar as opções padrão em 'Architect.Build.options' para usar a localidade 'en-gb'. Defina as seguintes propriedades conforme mostrado. Nota Estamos habilitando a AOT aqui em todo o quadro, por isso será usado para construções de produção e desenvolvimento:

 "SaídaPath": "dist / angular-i18n-demo /
en-gb ",
  "i18nlocale": "en-gb",
  "Deployurl": "/ en-gb /",
  "Basehref": "/ en-gb /",
  "AOT": Verdadeiro 

Angular suporta uma série de locais. Certifique-se de usar o valor correto para a propriedade 'i18nlocale'. Você pode ver a lista completa aqui .

Nos bastidores, as configurações acima, simplesmente carregam e lê um desses arquivos de preferência de localidade.

05. Sirva a configuração

Além de configurar a saída de construção, também precisamos configurar a configuração para o comando 'ng servir' para o desenvolvimento. Isso é mais direto, pois podemos simplesmente referenciar a configuração de construção que acabamos de adicionar. Em 'angular.json' adicione o seguinte bloco para 'arquiteto.serve.configurações':

 "AR-IQ": {
    "Browsertarget": "Angular-I18n-
Demo: Build: AR-IQ ",
    "SERVEPATH": "/ ar-q /"
  } 

Aqui estamos referindo as opções de configuração de criação usando a propriedade 'BrowserTarget', e também estamos definindo o 'SERVEPATH'. Antes que possamos servir ou construir o aplicativo árabe, precisamos criar o arquivo de traduções referenciados na propriedade 'i18nfile' acima. A Angular CLI inclui uma ferramenta para extrair texto sinalizado em um arquivo de origem de tradução padrão do setor.

Vamos cobrir esses arquivos com mais detalhes mais tarde no tutorial, mas por enquanto apenas precisamos exportar o arquivo vazio básico para nos permitir compilar.

Nós usaremos o comando 'ng xi18n' com as seguintes opções. Essa é a única vez que incluímos o ID da localidade no nome do arquivo '--out-file':

 $ NG XI18N - LOCALE DO PATH DEPUT -
mensagens.ar-iq.xlf --i18n-locale ar-q 

Isso deve criar um arquivo em um diretório SRC / Locais. A partir de agora, sempre saímos do arquivo chamado 'Message.xlf' e copiá-lo manualmente sobre a versão com o ID da localidade no nome. A razão para isso é impedir que a ferramenta de extração substitua quaisquer traduções existentes que adicionamos ao arquivo.

06. Switch Configuration.

Neste ponto, podemos agora compilar o projeto e ver o que acontece, mas precisamos dizer ao comando 'ng servir' qual configuração usar. Primeiro vamos dar uma olhada na versão em inglês. Nenhuma alteração aqui porque o inglês é o padrão:

 $ ng servir 

Como você pode ver, fica muito parecido com a versão original, que usa a localidade padrão do Angular de 'EN-US'. A diferença notável é a moeda agora especifica US $ em vez de apenas $. Ok, agora vamos tentar a versão árabe. Pare a versão em inglês e execute:

 $ ng servir --configuração = ar-q 

Como você esperaria, há diferenças mais óbvias nesta versão, em particular a data agora é escrita em árabe. O angular pode fazer isso porque os nomes de algumas coisas, como meses e dias, são de uma lista definida e, finalmente, eles se relacionam com um número conhecido. Tudo o mais, no entanto, ainda está em inglês.

07. Tubos cientes de localidade

Leve uma olhada mais de perto no código-fonte do 'app.component.html' e você verá que usamos um número de tubos diferentes. Os seguintes tubos angulares são cientes de localidade, o que significa que eles adaptam sua saída com base na localidade atual: 'Datatepipe', 'currescypipe', 'decimalpipe' e 'percentjas'.

Se você usar esses tubos cuidadosamente angular irá lidar com muito o trabalho de localização para você. Com cuidado, queremos dizer, use as opções predefinidas disponíveis onde puder. Um bom exemplo é a formatação de data dos EUA vs UK, mencionamos anteriormente. Se você estiver no Reino Unido e deseja exibir uma data usando o formato (sensível) dia-ano-ano-ano, você pode estar frustrado para descobrir que a opção '' shortdate '' predefinida renderiza como m / d / yy (por exemplo, . 10/9/18) e ser tentado a hardcode seu formato desejado como este:

 {{mydate | Data: 'dd / mm / y'}} 

Mas agora sabemos que recebemos o formato m / d / yy porque o angular usa a localidade 'EN-US' por padrão. Então, em vez de codificar o formato, devemos usar a opção '' Shortdate '' e localizar nosso aplicativo para usar 'en-GB'.

 {{mydate | Data: 'Shortdate'}} 

É preciso um pouco mais esforço, mas podemos adicionar locais ao conteúdo do nosso coração e sempre ter um formato de data amigável.

08. Substituindo as opções predefinidas

Infelizmente não parece que há uma maneira fácil de substituir um formato predefinido. Por exemplo, você não pode simplesmente decidir que prefere que o formato '' Shortdate '' seja DD / mm / aaaa em vez de DD / mm / y, pois não há como modificar o formato no tempo de execução. Além disso, você não pode adicionar suas próprias opções predefinidas.

Para estes casos de borda, você pode criar um tubo de data personalizado que envolve a 'datepipe' angular 'e lida com nenhum formato personalizado por locale. Qualquer coisa que não reconheça seria repassado para o 'Datepipe' embutido.

09. Curringypipe.

Fora da prateleira O 'curringypipe' irá formatar um número como dólares americanos, aparar para duas casas decimais e adicionar agrupamentos conforme definido nas preferências da localidade.

Você notará que em nossas localidades a moeda está sempre em dólares americanos. Não muda magicamente para a esterlina (GBP) quando você usa a localidade 'en-gb'. A razão para isso é que £ 10 não é o mesmo que $ 10, então você deve especificar explicitamente a moeda que seu número se refere.

Vamos atualizar 'app.component.html' para usar o GBP por toda parte. Ao especificar o código da moeda, você deve usar o valor correto do padrão ISO 4217 (lista disponível online).

Modifique os dois tubos de moeda adicionando ':' GBP '' como assim:

 {{valor $ | | assíncrono | Moeda: 'gbp'}} 

E você começará a ver o símbolo de £ em vez de US $.

Lembre-se, ele não faz nada inteligente como converter automaticamente USD para o valor equivalente no GBP se você alterar a moeda - ele apenas altera o símbolo que ele usa.

10. Fluxo de trabalho de tradução.

Ok, então temos nossos dois locais configurados e angulares é útil fazer parte do trabalho para nós fora da caixa, mas o texto ainda está em inglês. Angular não pode traduzir isso automaticamente, infelizmente, mas pode nos ajudar com partes do fluxo de trabalho. Isso é o que tem que acontecer:

• Bandeira de texto estático em todos os componentes para tradução
• Exportar arquivo de tradução contendo este texto estático
• Modifique o arquivo de tradução e adicione as traduções relevantes
• Mesclar o arquivo traduzido de volta no aplicativo

Angular nos ajuda com os passos 2 e 4, mas como desenvolvedores que precisamos fazer manualmente. O passo 3 normalmente seria concluído por um profissional ou agência de tradução, usando software especial para ler e atualizar o arquivo de tradução.

11. Detalhes do eixo.

Para conseguir isso, temos que adicionar um atributo especial a cada elemento que contém texto fixo a ser traduzido. Para ser claro se o conteúdo chegar de uma API, então não é corrigido texto e você precisaria localizar isso na API. Você só precisa adicionar o atributo quando o texto é escrito diretamente no modelo HTML no seu código-fonte. Um ponto chave aqui é que você deve tentar manter sua localidade de localização de arquivos typycript - em outras palavras, evitando colocar qualquer texto que precise ser traduzido na lógica do componente e mantenha tudo nos modelos. Caso contrário, a ferramenta de extração não será capaz de extraí-la. É uma boa prática de qualquer maneira para separar suas preocupações - na vida e no código.

Vamos abrir 'app.component.html' e comece com o título "valor atual". Basta adicionar o atributo 'i18n' ao elemento que contém diretamente o texto.

 & lt; div classe = "meta__title" i18n & gt;
     Valor atual
   & lt; / div & gt; 

É importante entender que este é apenas um atributo personalizado "mudo". Não é uma diretiva angular que desencadeia qualquer coisa no tempo de execução, na verdade, o compilador remove-o após a tradução.

De qualquer forma, vamos ver o que acontece quando executamos a ferramenta de extração novamente para regenerar o arquivo de tradução. Lembre-se de '--out-file' é apenas 'mensagens.xlf' agora:

 $ NG XI18N - LOCALE DO PATH DEPUT -
Mensagens.xlf --i18n-locale ar-q 

Abra o arquivo XLF de saída e você deve ver um novo bloco de unidade de tradução que pareça algo assim com algumas informações adicionais de contexto:

 & lt; trans-unidade id = "face3d45c0f0cd38b726e7798da15
3E2F8D55551 "DataType =" HTML "& GT;
    & lt; source & gt;
      Valor atual
    & lt; / source & gt; 

Ótimo, isso significa que a ferramenta pegou o atributo 'i18n'. Esse ID LONG é gerado pela ferramenta e permanecerá o mesmo, a menos que o texto seja alterado. Se você tiver várias instâncias exatamente do mesmo texto, todos receberão o mesmo ID. Não edite esse ID!

Se você preferir, você pode especificar um ID personalizado dentro do atributo 'i18n'. Se você fizer isso, o ID permanecerá o mesmo, mesmo que o texto seja alterado, então você precisa ter certeza de que não tem nenhuma conta de identificação em seu aplicativo. Use o prefixo '@@' para definir um ID personalizado. Aqui, o ID se tornará "título":

 & lt; div classe = "meta__title" i18n = "@@ title" & gt;
     Valor atual
   & lt; / div & gt; 

12. Adicione algum contexto

Para garantir que o tradutor possa fornecer uma tradução precisa, muitas vezes precisará saber o contexto que o texto está sendo usado. O atributo 'i18n' nos permite definir uma descrição e um significado para ajudar o tradutor. O formato é o seguinte:

 & lt; div i18n = "significado | Descrição @@
CustomID "& gt; text & lt; / div & gt; 

Vamos atualizar nosso título com um significado e descrição:

 & lt; div classe = "Meta__title" i18n = "
Título | Valor neste momento no tempo @@ title "& gt;
     Valor atual
   & lt; / div & gt; 

Isso deve dar ao contexto do tradutor para fornecer uma tradução precisa. Regenerar o arquivo de tradução e você deve ver esses valores foram emitidos. Vale a pena notar que, se você não usar um ID personalizado, o ID gerado leva o significado e o texto em conta. Então, o mesmo texto, mas com um significado diferente, terá um ID diferente. A descrição, no entanto, não tem impacto no ID.

13. Texto com variáveis

Vamos passar para a seção de introdução. O primeiro parágrafo contém texto e uma variável que será interpolada ao tempo de execução. Como nós lidamos com isso?

Bem feliz é bastante simples. Mais uma vez, precisamos adicionar um atributo "i18n" significativo ao elemento contendo. Adicioná-lo diretamente ao elemento de parágrafo:

 & lt; p i18n = "valor de fechamento | valor quando o mercado
fechado ontem @@ fechamentoValue "& gt;
Execute a ferramenta de extração novamente e você verá esta nova unidade de tradução:
  & lt; trans-unidade ID = "fechovalue"
datatype = "html" & gt;
    & lt; source & gt; ontem e amp; o valor de fechamento da APOS é
& lt; x id = "interpolação" equiv-text = "{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{}
fechamentoValue | Moeda: & amp; APOS; GBP & Amp; APOS;
}} "/ & gt;. & lt; / source & gt; 

Veja como a interpolação variável foi detalhada na saída. A coisa boa sobre isso é que permite que o tradutor modifique a estrutura gramatical da frase, se necessário, sem quebrar a ligação. Por exemplo, pode haver uma linguagem onde a sentença seria melhor escrita: X valor foi o fechamento de ontem, ou seja, com a variável no início.

14. Pluralização

Mover para o próximo parágrafo você verá alguma sintaxe intimidadora. Isso é chamado de formato de mensagem da UTI e permite especificar diferentes pedaços de texto com base no valor de uma variável.

Você pode usar isso para adicionar as palavras 'às palavras em inglês quando o valor é zero ou não um. Por exemplo, se 'segundos' for uma variável contendo o número de segundos, podemos usar essa expressão de pluralização da UTI:

 {{segundos}} {segundos, plural, um
{segundo}, outros {segundos}} 

Que vai produzir:

• 0 segundos
• 1 segundo
• 2 segundos

Ele não parece ser documentado, mas você também pode usar o 'assíncpipe' dentro da sintaxe da pluralização para trabalhar com observáveis.

Nesse exemplo, "um" e "outros" são categorias de pluralização. Há várias categorias para escolher, mas cuidado! Nem todas as localidades suportam todas as categorias e angular não informam se você tenta usar uma categoria que não seja suportada pela localidade atual. É fácil acabar pensando que você fez algo errado porque a categoria 'duas' não está funcionando em sua localidade 'en-gb' e, em vez disso, você está vendo o texto "outro". Inexplicavelmente 'en' (e muitos outros idiomas comuns) só apoiam 'um' e 'outro', embora 'zero' e 'dois' são valores explícitos.

Confira este arquivo para ver o que é realmente suportado.

15. Os múltiplos gráficos de barras radiais

Podemos contornar essa limitação usando números em vez de categorias. Basta prefixar o valor com um '=':

 Há {watchers, plural, = 0 {não é ninguém} = 1
{é uma pessoa} = 2 {são duas pessoas}
    outros {são {{{watchers}} pessoas}}
assistindo agora. 

Isso já está configurado no aplicativo de demonstração, só precisamos adicionar o atributo 'I18N' ao parágrafo contendo:

 & lt; p i18n = "observadores | Número de pessoas
assistindo o valor @@ Watchers "& gt; 

Execute a ferramenta de extração novamente para ver como isso parece. Você verá que isso é produzido de forma ligeiramente diferente. Criará duas unidades de tradução; Um para a própria expressão da UTI e que interpola essa expressão na string original.

16. Selecione a expressão

Se você deseja exibir um texto diferente, dependendo do valor de uma variável, você pode usar uma expressão de ICU 'Select', que é muito semelhante à sintaxe 'plural' demonstrada acima. Em nosso aplicativo DEMO, monitoramos a mudança aplicada ao valor e criamos um fluxo observável chamado 'tendência $' que produz 'up', 'para baixo' ou 'estável', dependendo se a mudança é positiva, negativa ou zero.

Em seguida, conectar nossa expressão de ICU 'Select' para produzir uma string diferente dependendo do valor do fluxo. Aqui você pode ver o 'Asyncpipe' em uso:

 O valor {TENDE $ | Assíncrono, selecione, para cima
{aumentado} para baixo {diminuído} estável
    {não mudou}} 

Esta é uma sintaxe um pouco mais limpa do que o uso de 'ngif' ou 'ngswitch' para manipular o DOM, além disso, também reproduz a ferramenta de extração. Adicione o atributo 'i18n' ao elemento contendo:

 & lt; div class = "Card__Info" I18n = "valor
Tendência | Descreve a tendência de mudança de valor @@ tendência "& gt; 

Regenerar o arquivo de traduções e você verá a abordagem é semelhante à saída plural, com duas unidades de tradução criadas. As expressões da UTI são bem úteis depois que você se acostumar com eles, além de você pode nestas para criar saídas mais complexas.

17. Adicionar traduções

Mais um atributo 'i18n' para adicionar:

 & lt; div class = "card__info" i18n = "transações
Contagem | Número de transações hoje @@
Transações "& GT;
     Transações: {{transações $ | assíncrono |
número }}
   & lt; / div & gt; 

Agora marcamos todo o texto que precisa ser traduzido, podemos gerar o arquivo de tradução uma última vez. Depois de ser criado renomeá-lo para 'mensagens.ar-iq.xlf' e substitua a encarnação anterior. Este é o arquivo que estaríamos enviando para o profissional de tradução, mas para os propósitos deste tutorial, o Google Translate estará em pé!

Abra o arquivo XLF e duplique cada '& lt; source & gt;' elemento, renomeando-o '& lt; alvo & gt;'. Infelizmente, pode ser bastante desarrumado, por isso pode ajudar a embelezar o conteúdo.

Para verificar todos nós, salve o arquivo e inicie o aplicativo com a localidade árabe:

 $ ng servir --configuração = ar-q 

Se você vir alguma mensagem no terminal assim, isso significa que você perdeu um:

 Erro no XLIFF PARSE Erros: Mensagem * ID *
Perda de uma tradução ("

Espero que você não tenha erros e você poderá ver o aplicativo no navegador. Nós não adicionamos nenhum árabe real, mas não parece muito diferente.

18. Google Tradutor

Vamos começar com algo fácil - o título "valor atual". O Google Translate me diz que deve ser (texto árabe aqui) Portanto, atualize o valor no '& lt; target & gt;' elemento:

 & lt; source & gt; valor atual & lt; / source & gt;
       & lt; Target & GT; texto árabe aqui e lt; / alvo & gt; 

Até agora tudo bem. Agora vamos fazer um com interpolação. Aqui está "o valor de fechamento de ontem foi ..." (espero!):

 & lt; Target & GT; texto árabe aqui e lt; x
id = "interpolação" equiv-text = "{{fechamentoValue
| Moeda: & amp; APOS; GBP & Amp; APOS; }} "/>.</target>

Use um número quando você traduz para que você possa ver onde a interpolação deve ser. Observe que quando você vê o resultado traduzido no Google Tradutor aparecerá invertido - ou seja, o número no início - mas quando você copie e colá-lo no arquivo de tradução, ele retornará à ordem original. Isso está acontecendo porque o árabe é uma linguagem RTL para que o roteiro seja inteiramente espelhado. O Google Translate faz isso adicionando um atributo 'dir = "rtl"' para o elemento contendo. Vamos aprender como fazer isso no próximo passo. O resto das traduções está disponível no repo de demonstração, ramo 'tutorial'.

19. direção do script

Precisamos gerenciar a direção do script em nosso aplicativo porque angular não fará isso automaticamente para nós. Também não parece haver qualquer maneira de detectar se a localidade atual é uma linguagem LTR ou RTL, então precisaremos hardbode isso. Seria ótimo se angular oferecesse uma diretiva incorporada para isso.

Abrir 'app.component.ts'. Importar 'injetar', 'locale_id' e 'hostbinding' de '' @ angular / núcleo ''. Em seguida, configure o 'hostbinding' da seguinte maneira. Isso adicionará um atributo 'Dir' para o AppComponent e definir a direção do idioma padrão para 'LTR':

 @hostbinding ('attr.dir') dir = 'ltr'; 

Em seguida, adicione um construtor e injegue o 'locale_id'. Lembre-se que isso é definido pela nossa configuração porque estamos usando o AOT.

 Construtor (@Inject (locale_id) locale privado: string) {} 

E finalmente adicionar o seguinte snippet ao método existente 'ngoninit'. Aqui estamos verificando se o 'locale_id', ou seja, 'ar-q', começa com 'ar' e se ele mudar a direção para 'RTL'.

 se (this.locale.startswith ('ar')) {
     este.dir = 'rtl';
} 

Se você planeja suportar mais localidades, provavelmente precisará refatorar isso para torná-lo mais escalável, no entanto, como há apenas cerca de dez idiomas RTL em uso hoje que esta abordagem não deve ser muito difícil. Comece o aplicativo árabe e você agora deve ver que a interface do usuário é espelhada - o sinal de £ deve estar à direita.

20. Produção

O passo final é gerar e verificar nossas construções de produção. Primeiro, no entanto, precisamos fazer outra modificação rápida para a configuração 'Angular.json'.

Em 'Architect.Build.configurações' Duplicar o objeto de produção existente e renomeá-lo '"Production-AR-IQ". Em seguida, copie e cole as propriedades da configuração "" AR-IQ "existente no objeto, para que você tenha as opções de produção quanto as opções 'i18n'.

Você também precisa atualizar o 'arquiteto.serve.configurações' também. Desta vez, duplique o objeto '"AR-IQ" existente e renomeie-o' "Production-AR-IQ" 'e altere o valor "BrowserTarget" para apontar para sua nova configuração' Production-AR-IQ '.

Agora você pode construir e servir sua localidade de produção em árabe com este comando:

 $ ng servir --configuração = produção-ar-q 

Ok, terminamos! Nós internacionalizamos com sucesso nosso aplicativo e localizei para o público 'en-GB' e 'ar-q'. Angular torna o processo notavelmente simples para o desenvolvedor, na verdade, o bit mais difícil é descobrir o que as traduções devem ser - desculpas a quaisquer alto-falantes árabes se alguma coisa está errada!

Este artigo foi originalmente publicado em questão 281 da revista Creative Web Design Web Designer. Comprar edição 281 aqui ou Inscreva-se no web designer aqui .

Artigos relacionados:

• Como construir um site de página inteira em angular
• Os melhores laptops para programação em 2019
• Como construir um aplicativo