Angular-da Işjeň çykgytlaryň stilizasiýasy

URL-i salgys setirine gabat gelýän çykgytlaryň, mysal üçin, reňki ýaly bir stili bilen özleşdirilip görkezilmegini üpjün etmek mümkin. Şu maç üçin Angular-da aýratyn atribut RouterLinkActive görüp goýuldy.

Geliň onuň nädip işleýändigine göz aýlap geçireli. Ilki bilen ony import edeliň:

import { RouterLinkActive } from '@angular/router';

Dekoratorda ýazalyň:

@Component({
	......
	imports: [RouterOutlet, RouterLink, RouterLinkActive],
	......
})

Indi bolsa bu atributy çykgytlarymyza goşalyň:

<nav>
	<a
		routerLink="/aaaa-component"
		routerLinkActive="active"
	>
		Aaaa Komponent
	</a>
	<a
		routerLink="/bbbb-component"
		routerLinkActive="active"
	>
		Bbbb Komponent
	</a>
</nav>

Görşüňiz ýaly, bizim myslymyzda atributyň bahasy active. Bu işjeň çykgyda beriler CSS klassynyň ady. Indi biz olary islegimiz ýaly stilizasiýa edip bileris:

.active {
	color: red;
}

Taslamanyzdaky işjeň çykgytlary stilizasiýa ediň.