Стилизација на активни врски во Angular

Можно е да се направи така што врските, чиј URL се совпаѓа со адресната лента, да се истакнуваат со одреден стил, на пример, со боја. За ова во Angular е предвидена специјална атрибут RouterLinkActive.

Ајде да погледнеме како функционира. За почеток да го импортираме:

app/app.component.tsimport { RouterLinkActive } from '@angular/router';

Да го запишеме во декораторот:

app/app.component.ts@Component({
  ......
  imports: [RouterOutlet, RouterLink, RouterLinkActive],
  ......
})

А сега да го додадеме овој атрибут на нашите врски:

app/app.component.html<nav>
  <a
    routerLink="/aaaa-component"
    routerLinkActive="active"
  >
    Aaaa Component
  </a>
  <a
    routerLink="/bbbb-component"
    routerLinkActive="active"
  >
    Bbbb Component
  </a>
</nav>

Како што можете да видите, во нашиот пример вредноста на атрибутот е active. Ова е името на CSS класата која ќе ѝ се доделува на активната врска. Сега можеме да ги стилизираме, како што сакаме:

css.active {
  color: red;
}