Como mostrar ou ocultar o componente com base na rota em Angular.

Nov 30 2022
Como desenvolvedor front-end, você se depara com uma situação em que precisa mostrar um componente apenas se navegar para o painel ou para o componente de login. Para descansar, você deve ocultar.

Como desenvolvedor front-end, você se depara com uma situação em que precisa mostrar um componente apenas se navegar para o painel ou para o componente de login. Para descansar, você deve ocultar.

Como você vai administrar tudo isso no angular??

O Well Angular fornece vários eventos e propriedades do roteador que você pode usar para rastrear em qual usuário do roteador está atualmente.

Estaremos discutindo o evento NavigationEnd da rota Angular

O que é Fim de Navegação??

Um evento acionado quando uma navegação termina com sucesso.

Como usar??

  • Dentro do construtor, você se inscreve nos eventos do roteador.
  • Em seguida, você verificará se o val inscrito é uma instância de Navigation End ou não.
  • Se sim, você usará esse valor inscrito e usará value.url para encontrar o URL em que o usuário navegou atualmente e colocar a lógica dentro.
  • Por fim, você escreverá sua lógica de acordo com value.url

Meu app.component.html se parece com isso

Aqui você pode ver que estou mostrando o cabeçalho somente se a propriedade "showHeader" for verdadeira

Meu app.component.ts se parece com isso

Agora, se eu clicar no botão enviar, ele será direcionado para 'painel'
e mostrará o componente do painel.

* Portanto, o componente de cabeçalho torna-se visível *

O repositório de trabalho para referência
https://stackblitz.com/edit/angular-ivy-atods7?file=src/app/app.component.ts

Link do Github
https://github.com/deepa314/angular-ivy-atods7.git

Espero que ajude vocês :)
Se gostar, curta, compartilhe e se inscreva