Стилизация активных ссылок в Angular
Можно сделать так, чтобы ссылки, URL
которых совпадает с адресной строкой,
выделялись каким-то стилем, например,
цветом. Для этого в Angular предусмотрен
специальный атрибут RouterLinkActive.
Давайте посмотрим, как он работает. Для начала импортируем его:
import { RouterLinkActive } from '@angular/router';
Пропишем в декораторе:
@Component({
......
imports: [RouterOutlet, RouterLink, RouterLinkActive],
......
})
А теперь добавим этот атрибут к нашим ссылкам:
<nav>
<a
routerLink="/aaaa-component"
routerLinkActive="active"
>
Aaaa Component
</a>
<a
routerLink="/bbbb-component"
routerLinkActive="active"
>
Bbbb Component
</a>
</nav>
Как вы видите, в нашем примере значением
атрибута является active. Это имя
CSS класса, который будет даваться активной
ссылке. Теперь мы можем стилизовать
их, как нам угодно:
.active {
color: red;
}
Стилизуйте активные ссылки в вашем проекте.