Uunganisho wa wingi wa madarasa ya CSS katika Angular

Kwa kutumia derectiva ngClass unaweza kuwasha na kuzima darasa la CSS mara moja kwenye kitambulisho. Derectiva inakubali kitu kama thamani, ambayo funguo zake zitakuwa madarasa, na thamani - maadili ya boolean. Darasa litakuwa limewashwa ikiwa thamani true imewekwa, na limezimwa ikiwa false.

Tuangalie kwa vitendo. Hebu tuseme tuna madarasa yafuatayo:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Tuangalie kwa mifano, jinsi ya kuwasha na kuzima madarasa haya kwa block.

Mfano

Washa darasa moja na uzime lingine:

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

Mfano

Hebu hali za madarasa zihifadhiwe kwenye sifa za darasa:

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

Weka mwonekano wa darasa kulingana na thamani za sifa zetu:

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

Mfano

Sifa inaweza kuwa na kitu kizima chenye madarasa na hali:

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

Weka kitu hiki kwenye block yetu:

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

Mfano

Thamani za kitu chetu zinaweza kupatikana kutoka kwa sifa zingine za darasa:

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

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

Weka kitu hiki kwenye block yetu:

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

Kazi za Vitendo

Unda madarasa mawili ya CSS. Hebu moja kati yao iwe inaainisha msingi wa block, na la pili - ukubwa wa herufi.

Fanya vitufe viwili. Bonyeza kitufe cha kwanza kubadilisha hali ya darasa la kwanza, na bonyeza kitufe cha pili - kubadilisha hali ya darasa la pili.