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/dog
ou animals/cat
recuperar dog
ou a cat
partir do :animal
parâ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 ActivatedRoute
objeto. 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.paramMap
e 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/dog
para animals/cat
não irá destruir e inicializar o AnimalComponent
, então o ngOnInit
mé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 ActivatedRoute
morre 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 ActivatedRoute
objeto; 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 paramMap
e começar a enviar spam para os parâmetros da rota, switchMap
cancelarei 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 paramMap
assinatura. 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 switchMap
fará 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 switchMap
para cancelar qualquer solicitação pendente desnecessária.