Pengubahan Gaya Dinamik dalam Angular

Dengan menggunakan arahan ngClass dan ngStyle, kita boleh mengikat ungkapan kepada elemen, yang membolehkan gaya kita berubah secara dinamik.

Mari kita buat supaya teks disembunyikan atau ditunjukkan menggunakan sifat active kelas komponen:

app/app.component.tsexport class AppComponent {
  active: boolean = true;
  
  toggle() {
    this.active = !this.active;
  }
}

Untuk itu, tulis fungsi toggle, yang akan secara bergilir-gilir menghidupkan atau mematikan sifat ini:

app/app.component.tsexport class AppComponent {
  active: boolean = true;
  
  toggle() {
    this.active = !this.active;
  }
}

Dalam fail CSS komponen, tetapkan gaya berikut kepada kelas:

app/app.component.css.hidden {
  display: none;
}

Dalam templat komponen, buat satu div, dan tambahkan kepadanya kelas CSS hidden, yang akan dihidupkan atau dimatikan bergantung kepada sifat active dari kelas komponen:

app/app.component.html<div [ngClass]="{hidden: active}">
  text
</div>

Buat juga butang, yang apabila ditekan akan memanggil kaedah toggle, menunjukkan atau menyembunyikan komponen kami:

app/app.component.html<button (click)="toggle()">
  toggle
</button>