Massiewe binding van CSS-klasse in Angular

Met die ngClass-richtlijn kan jy verskeie CSS-klasse in 'n tag aanskakel en afskakel. Die richtlijn aanvaar 'n objek as waarde, waarvan die sleutels die klasse is en die waardes - Boole-waardes. 'n Klas sal aangeskakel wees as die waarde true daarvoor gestel is, en afgeskakel as dit false is.

Kom ons kyk dit in die praktyk. Laat ons aanneem ons het die volgende klasse:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Kom ons kyk aan die hand van voorbeelde hoe om hierdie klasse vir 'n blok in en uit te skakel.

Voorbeeld

Laat ons een klas aanskakel en 'n ander afskakel:

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

Voorbeeld

Laat ons aanneem die toestande van die klasse word in eienskappe van die klas gestoor:

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

Laat ons die sigbaarheid van die klas bind aan die waardes van ons eienskappe:

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

Voorbeeld

'n Eienskap kan 'n hele objek met klasse en toestande bevat:

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

Laat ons hierdie objek aan ons blok bind:

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

Voorbeeld

Die waardes vir ons objek kan verkry word van ander eienskappe van die klas:

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

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

Laat ons hierdie objek aan ons blok bind:

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

Praktiese take

Skep twee CSS-klasse. Laat een van hulle die agtergrond van 'n blok definieer, en die tweede - die lettergrootte.

Maak twee knoppies. Laat 'n klik op die eerste knoppie die eerste klas wissel, en 'n klik op die tweede knoppie - die tweede klas wissel.