Controlando estados no Angular pela URL
Imagine um cenário onde você precisa desenvolver uma página que possui um modal. Como você faria para controlar o seu estado de aberto e fechado?
Agora pense em uma página de listagem de registros que precisa ter filtros e paginação. Como você desenvolveria estas funcionalidades?
Se a resposta para as duas perguntas foi de criar estados locais no componente, você está correto. Porém, se você não pensou em outras alternativas levando em conta a experiência do usuário, então esse artigo é para você!
Vamos pegar o exemplo do modal. Se o usuário abriu o modal por engano e logo após decidiu clicar para voltar no seu próprio navegador, o que acha que aconteceria? Outro caso: o usuário gostaria de ter um link onde este modal já viria aberto logo ao acessar a página. Usando estados locais, isso ficaria um pouco difícil de ser desenvolvido, certo?
Para aprimorar a usabilidade e a eficiência de uma aplicação, muitas vezes vale a pena controlarmos seus estados a partir da URL.
O mapeamento de estado nas URLs refere-se à prática de refletir o estado atual de uma página web na própria URL. Em vez de depender exclusivamente de ações do usuário, como cliques ou envios de formulários, o estado da aplicação é incorporado à própria estrutura da URL. Isso é feito adicionando parâmetros ou segmentos à URL que indicam o estado atual da interface.
Uma das principais vantagens do mapeamento de estado é a facilidade de compartilhamento de links. Quando o estado da aplicação está incorporado na URL, os usuários podem compartilhar links que levam diretamente a uma determinada visualização ou configuração. Isso não apenas simplifica a comunicação, mas também melhora a consistência na experiência do usuário.
Costumo dizer que uma das grandes vantagens de aplicações web é essa possibilidade de compartilhar um link que vai refletir exatamente o que a pessoa precisa acessar.
Implementando exemplo no Angular
Vamos entender como desenvolver a funcionalidade de um modal no Angular, controlando seu estado de aberto e fechado pela URL a partir dos Query Params.
Estamos utilizando o componente NzModalComponent da biblioteca UI NG-ZORRO. Ele possui a propriedade nzVisible que indica se o Modal estará aberto ou não. Em vez de utilizarmos um estado local, vamos atribuir um Observable que detém controle dos Query Params da rota atual.
O Observable isOpen$ recebe a partir da injeção de dependência o ActivatedRoute.queryParams. Sabemos que os Query Params do Angular são reativos, ou seja, a cada mudança de parâmetros da rota, o novo valor atualizado será emitido.
Estamos interessados somente em um parâmetro: isOpen. Precisamos capturar somente ele da URL. Para isso, tiramos proveito do operador map do RxJS. Agora nosso Observable sempre terá o valor mais atualizado deste estado, que é o que de fato precisamos.
Agora basta atribuir o Observable à propriedade do componente de modal utilizando o | async. Esta é uma técnica muito importante para trabalhar com dados reativos. Se você ainda não tem domínio deste pipe, sugiro ler o meu artigo Angular Pipes: uma visão mais profunda.
Atribuímos então os comportamentos para que tudo funcione corretamente: ao clicar no botão "Abrir Modal", navegamos para a mesma rota com o parâmetro isOpen: true. Ao fechar o modal fazemos o contrário: navegamos para a rota com o parâmetro isOpen: false.
Observe que ao utilizar Observables, temos a reatividade ao nosso favor. Uma vez que nos inscrevemos para ouvir as mudanças dos Query Params, não precisamos nos preocupar em manipular o estado. Estamos usufruindo da programação declarativa em vez da programação imperativa.
Por fim, alcançamos nosso objetivo final que é salvar o estado na URL. Ao acessar a aplicação no navegador pela URL http://localhost:4200?isOpen=true temos imediatamente nosso modal aberto. E poderíamos ir além, como por exemplo atribuindo alguns valores para este modal, tudo pela URL.
Um ponto que devemos ter cuidado é sobre os valores desses parâmetros. Uma vez que o usuário tem total liberdade sobre o que preencher na URL, precisamos nos atentar para situações onde são preenchidos valores indevidos, afim de evitar bugs e problemas de segurança.
O código final da implementação pode ser conferido pelo Stackblitz:
Conclusão
Neste artigo entendemos a importância do mapeamento de estado nas URLs. Esta prática tem a capacidade de refletir o estado atual de uma página web na própria URL, garantindo uma melhor experiência do usuário.
Vimos também como aplicar o controle de estado na URL a partir de um exemplo prático no Angular, tendo um componente de modal que vincula seu estado de aberto e fechado pelos parâmetros atribuídos.
