Massenbindung von CSS-Klassen in Angular

Mit der Direktive ngClass kann man sofort eine Reihe von CSS-Klassen in einem Tag ein- und ausschalten. Die Direktive nimmt als Wert ein Objekt an, dessen Schlüssel die Klassen sind und deren Werte - boolesche Werte. Eine Klasse wird aktiviert, wenn für sie der Wert true gesetzt ist, und deaktiviert, wenn false.

Lassen Sie uns das in der Praxis sehen. Nehmen wir an, wir haben die folgenden Klassen:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Lassen Sie uns an Beispielen sehen, wie man diese Klassen für einen Block ein- und ausschaltet.

Beispiel

Lassen Sie uns eine Klasse aktivieren und eine andere deaktivieren:

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

Beispiel

Nehmen wir an, die Zustände der Klassen sind in Eigenschaften der Klasse gespeichert:

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

Binden wir die Sichtbarkeit der Klasse in Abhängigkeit von den Werten unserer Eigenschaften:

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

Beispiel

In einer Eigenschaft kann ein ganzes Objekt mit Klassen und Zuständen sein:

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

Binden wir dieses Objekt an unseren Block:

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

Beispiel

Man kann die Werte für unser Objekt aus anderen Eigenschaften der Klasse erhalten:

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

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

Binden wir dieses Objekt an unseren Block:

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

Praktische Aufgaben

Erstellen Sie zwei CSS-Klassen. Lassen Sie eine davon den Hintergrund des Blocks definieren und die zweite - die Schriftgröße.

Erstellen Sie zwei Schaltflächen. Lassen Sie ein Klick auf die erste Schaltfläche die erste Klasse umschalten (toggeln) und ein Klick auf die zweite - die zweite Klasse umschalten.