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;
}

Өз долбооруңуздагы активдүү шилтемелерди стилдеңиз.