Masinis CSS klasių pririšimas Angular

Naudojant direktyvą ngClass galima įjungti ir išjungti žyme iš karto visą CSS klasių rinkinį. Direktyva reikšme priima objektą, kurio raktai bus klasės, o reikšmės - loginės reikšmės. Klasė bus įjungta, jei jai nustatyta reikšmė true, ir išjungta, jei false.

Pažiūrėkime praktiškai. Tarkime, kad turime šias klases:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Pažiūrėkime pavyzdžiais, kaip įjungti ir išjungti šias klases blokui.

Pavyzdys

Įjunkime vieną klasę ir išjunkime kitą:

<div [ngClass]="{blue: true, bold: false}">
	text
</div>

Pavyzdys

Tarkime, kad klasių būsenos saugomos klasės savybėse:

export class AppComponent {
	public isBlue: boolean = true;
	public isBold: boolean = false;
}

Susiekime klasės matomumą priklausomai nuo mūsų savybių reikšmių:

<div [ngClass]="{blue: isBlue, bold: isBold}">
	text
</div>

Pavyzdys

Savybėje gali būti visas objektas su klasėmis ir jų būsenomis:

export class AppComponent {
	public styles = {
		blue: false,
		bold: true,
	}
}

Pririškime šį objektą prie mūsų bloko:

<div [ngClass]="styles">
	text
</div>

Pavyzdys

Galima gauti reikšmes mūsų objektui iš kitų klasių savybių:

export class AppComponent {
	public isBlue: boolean = false;
	public isBold: boolean = true;

	public styles = {
		blue: this.isBlue,
		bold: this.isBold,
	}
}

Pririškime šį objektą prie mūsų bloko:

<div [ngClass]="styles">
	text
</div>

Praktinės užduotys

Sukurkite dvi CSS klases. Tegul viena iš jų apibrėžia bloko foną, o antroji - šrifto dydį.

Padarykite du mygtukus. Tegul paspaudimas ant pirmojo mygtuko įjungia/išjungia pirmąją klasę, o paspaudimas ant antrojo - įjungia/išjungia antrąją klasę.