Stylování aktivních odkazů v Angular
Lze zařídit, aby odkazy, jejichž URL
odpovídá adresnímu řádku, byly zvýrazněny
nějakým stylem, například barvou. K tomu
má Angular připravený speciální
atribut RouterLinkActive.
Podívejme se, jak funguje. Pro začátek jej importujeme:
import { RouterLinkActive } from '@angular/router';
Propíšeme v dekorátoru:
@Component({
......
imports: [RouterOutlet, RouterLink, RouterLinkActive],
......
})
A nyní přidáme tento atribut k našim odkazům:
<nav>
<a
routerLink="/aaaa-component"
routerLinkActive="active"
>
Aaaa Component
</a>
<a
routerLink="/bbbb-component"
routerLinkActive="active"
>
Bbbb Component
</a>
</nav>
Jak vidíte, v našem příkladu je hodnotou
atributu active. To je jméno
CSS třídy, která bude přiřazena aktivnímu
odkazu. Nyní je můžeme stylovat,
jak chceme:
.active {
color: red;
}
Stylujte aktivní odkazy ve vašem projektu.
