Como recuperar parâmetros da URL e da string de consulta no Angular
Chegou ao meu conhecimento que algumas pessoas estão confusas sobre o roteamento em Angular. Especificamente, há alguma confusão em torno da recuperação de parâmetros da URL e da string de consulta. É uma tarefa bastante simples, mas pode ajudar a trabalhar em um exemplo juntos. Felizmente para você, criei um StackBlitz que ajuda a explicar as diferenças entre o uso do instantâneo e da assinatura. Vamos dar uma olhada nisso.
Rotas
Para nossos propósitos, vamos nos concentrar nos parâmetros de rota. Nós vamos criar a rota "animals/:animal". Com esta rota, podemos navegar para animals/dogou animals/catrecuperar dogou a catpartir do :animalparâmetro.
O cólon é a oferta. Isso é o que faz da segunda parte do URL um parâmetro.
Acessando o URL
Angular nos fornece o ActivatedRouteobjeto. Podemos acessar o URL por meio desse objeto, mas primeiro você precisa injetá-lo em seu componente. Injete como qualquer outro serviço:
Acessando Parâmetros de URL
Existem duas formas geralmente aceitas de acessar os parâmetros de URL. Um é completamente route.snapshot.paramMape o outro é completamente route.paramMap.subscribe. A principal diferença entre os dois é que a assinatura continuará a ser atualizada conforme o parâmetro for alterado para essa rota específica. Isso é mais fácil de mostrar do que de explicar, portanto, certifique-se de jogar com o exemplo do StackBlitz .
Instantâneo
Usar o instantâneo é, como o nome sugere, um evento único. Um caso de uso típico é obter o parâmetro quando o componente é carregado. Leia o código explicitamente; quando eu carregar o componente eu vou pegar o parâmetro URL.
Essa estratégia não funcionará se o parâmetro mudar dentro do mesmo componente. Mais explicitamente, mudar de animals/dogpara animals/catnão irá destruir e inicializar o AnimalComponent, então o ngOnInitmétodo não é chamado pela segunda vez.
Inscrição
Usando a assinatura é o mesmo que qualquer outra assinatura. Se houver uma mudança, o valor do observável será empurrado para a função de retorno de chamada. Se isso não estiver claro, faça alguma tarefa e leia sobre o RxJS .
Essa estratégia pode ser exagerada, mas é definitivamente a estratégia mais segura se você ainda estiver confuso.
Além disso, não há necessidade de cancelar a inscrição do paramMap. O ActivatedRoutemorre com o componente roteado e, portanto, a assinatura morre com ele.
Acessando Parâmetros de Consulta
Acessar parâmetros de string de consulta é semelhante ao acesso a parâmetros de URL. É apenas uma propriedade diferente no ActivatedRouteobjeto; queryParamMap. Portanto, todos os mesmos princípios se aplicam, mas certifique-se de usar a propriedade certa.
Avançado – Usando o switchMap
Durante minha pesquisa, encontrei um exemplo angular que canalizou os parâmetros através de um switchMap. O que é um switchMap? Resposta longa: não sei. Resposta curta: basicamente, cancela uma solicitação quando uma nova é recebida.
Por exemplo, se eu assinar o paramMape começar a enviar spam para os parâmetros da rota, switchMapcancelarei todas as solicitações pendentes e atenderemos à nova solicitação. Isso é um exagero na maioria dos casos, mas pode ser útil.
ESPERAR! O código acima não reflete o exemplo angular . Estou ignorando a solicitação HTTP deles no switchMap. Vamos mergulhar um pouco mais com o exemplo abaixo.
No exemplo acima, estou fazendo uma solicitação HTTP dentro da paramMapassinatura. Espero que todos saibamos que os pedidos HTTP são relativamente caros. Se eu estou enviando alterações de parâmetros, eu vou querer cancelar todas as solicitações anteriores. Nesse caso, o uso switchMapfará exatamente isso e, portanto, melhorará o desempenho.
Conclusão
No geral, obter parâmetros da URL é bem simples. Use o instantâneo para uma captura única ou uma assinatura se os parâmetros puderem mudar dentro do mesmo componente / rota. Se você fizer uma solicitação HTTP dentro da assinatura, use switchMappara cancelar qualquer solicitação pendente desnecessária.