Стилизатсияи пайвандҳои фаъол дар 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;
}

Пайвандҳои фаъолро дар лоиҳаи худ стилизоватсия кунед.