Pengikatan Kelas CSS Secara Pukal dalam Angular

Dengan menggunakan arahan ngClass, kita boleh menghidupkan dan mematikan satu set kelas CSS dalam tag sekaligus. Arahan ini menerima nilai objek, di mana kuncinya adalah kelas, dan nilainya ialah nilai boolean. Kelas akan dihidupkan jika nilainya ditetapkan kepada true, dan dimatikan jika false.

Mari kita lihat dalam praktik. Katakan kita mempunyai kelas berikut:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Mari kita lihat contoh-contoh bagaimana untuk menghidupkan dan mematikan kelas-kelas ini untuk blok.

Contoh

Hidupkan satu kelas dan matikan yang lain:

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

Contoh

Katakan keadaan kelas disimpan dalam sifat kelas:

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

Ikatkan keterlihatan kelas bergantung kepada nilai sifat kita:

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

Contoh

Sifat boleh mengandungi keseluruhan objek dengan kelas dan keadaannya:

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

Ikatkan objek ini kepada blok kita:

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

Contoh

Nilai untuk objek kita boleh didapatkan dari sifat kelas lain:

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

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

Ikatkan objek ini kepada blok kita:

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

Latihan Praktikal

Buat dua kelas CSS. Biar satu daripadanya mentakrifkan latar belakang blok, dan yang kedua - saiz font.

Buat dua butang. Biarkan klik pada butang pertama togol kelas pertama, dan klik pada butang kedua - togol kelas kedua.