[HELP] Angular Routes - Sobre as Rotas ativas
Olá pessoal, estou aprendendo Angular com um projeto pessoal, e encontrei um probleminha meio chato.
Eis a questão:
Estou tentando criar uma barra lateral com links e redirecionamentos, porém não estou conseguindo ativar o -- routerlinkActive -- para aplicar a minha estilização CSS no link ativo da barra.
Esse é o código HTML do componente Sidebar:
<nav>
<ul class="nav-list">
<li routerLink="" routerlinkActive="active">
<a>Home</a>
</li>
<li routerLink="/about" routerlinkActive="active">
<a>Sobre </a>
</li>
<li>
<a routerLink="#">Exercicios</a>
</li>
<li>
<a routerLink="#">Outro link </a>
</li>
<li>
<a routerLink="#">Outra pagina </a>
</li>
<li>
<a routerLink="#">Outra </a>
</li>
</ul>
</nav>
Essa é a pagina inicial (Home), apenas com esse paragrafo:
Essa é a Sobre, apenas com esse paragrafo também:
Criei essas duas partes para testar o funcionamento da barra lateral,
Com a classe ativa, a barra lateral ganha a estilização:
Ficando assim:
Repare o "class=active" no primeiro li.
<nav>
<ul class="nav-list">
<li routerLink="" routerlinkActive="active" class="active">
<a>Home</a>
</li>
<li routerLink="/about" routerlinkActive="active">
<a>Sobre </a>
</li>
<li>
<a routerLink="#">Exercicios</a>
</li>
<li>
<a routerLink="#">Outro link </a>
</li>
<li>
<a routerLink="#">Outra pagina </a>
</li>
<li>
<a routerLink="#">Outra </a>
</li>
</ul>
</nav>
Porém eu gostaria que a classe fosse ativa pelo
routerlinkActive="active"
pois quero uma Barra Lateral dinâmica.
Barbara Damasceno @barbaradamascenoOi Pedro. Tentei usar aqui o RouterlinkActive e também não consegui. Inclusive fiz o mesmo exemplo do tutorial no site oficial do Angular e não mudou nem a estilização, nem a rota. Acabei optando por usar o ngClass que funcionou perfeitamente. Sei que não responde exatamente tua pergunta, mas é uma alternativa 🤭
Voce pode definir uma variável booleana no arquivo ts e criar uma função para mudá-la.
<div [ngClass]="{'active': abaAtiva}"> </div>
Pedro Augusto de Souza Brandes @pedrobrandesQue legal Barbara, vou testar e dar uma olhada, esse NgClass é uma diretiva certo?
Você pode falar um pouco mais sobre a função no arquivo ts?
Barbara Damasceno @barbaradamascenoIsso. O NgClass vai basicamente adicionar/remover a classe que está entre aspas, nesse caso 'active', se a variável (no exemplo que dei "abaAtiva") for true.
Então no ts você precisa declarar essa variável como false (ou seja, sempre vai estar não ativa) e fazer uma função da mesma forma que fazíamos em Javascript: "Se clicar no botão faça isso".
Para o NgClass adicionar a classe, a variável precisa ser verdadeira, então você pode inverter isso dentro da função.
PORÉM, vi aqui que não vai funcionar assim pra teu caso, pois ativaria a estilização em todas as abas quando for true, nesse caso precisa usar algum id para ficar estilizada somente a que você precisa. Uma opção seria:
- A variável ser uma string, não uma booleana;
- Enviar uma palavra pela função, um identificador único;
- Dentro da função atribuir esse valor a variável;
- Mudar a forma da verificação dentro da NgClass;
(Não te passo um exemplo com código pra ser mais enriquecer no sentido de você codar mesmo e acabar não copiando e colando 🙏🏻. Na programação tem muito disso de não passar a resposta em código, por isso tentei te explicar um pouco 😉. Espero que tenha dado pra entender. Me fala se ainda ficar com dúvida.)
ps.: Uma boa também seria buscar uma forma de ele ver a rota atual para já deixar estilizado independente do link que carregar!
- Pedro Augusto de Souza Brandes @pedrobrandes
Nossa Barbara, muitoo obrigado!!! Ajudou eu a entender tbm outros conceitos q eu andei vendo no google e não tava entendendo!
Vou tentar aqui e retorno haha