Sekiranya anda telah berada di industri pengkodean untuk beberapa waktu sekarang, anda mungkin sudah tahu bahawa mengembangkan variasi dinamik boleh menjadi tugas dalam aplikasi web. Bergantung pada platform pengaturcaraan anda memilih untuk menggunakan tahap kerumitan anda cenderung berbeza, tetapi untungnya prestasi ini dapat dicapai dengan mudah di Angular 8 dan juga versi Angular sebelumnya. Dalam artikel ini, kita akan membincangkan gaya nst pada 8.
Sintaks Harta Templat dalam Sudut 8
Sebelum kita mendalami semua fungsi dan modul yang disertakan dengan Angular 8, marilah kita melihat sintaks properti di Angular 8 terlebih dahulu dan bagaimana kita dapat mengubah warna sifat warna di Jawa tulen.
biarkan myDiv = document.getElementById ('my-div') myDiv.style.color = 'orange' // mengemas kini div melalui sifatnyaMari kita melakukan tugas yang sama di Angular 8 dengan memanfaatkan perpustakaan terbina dalam dan juga modul lain.
gaya menggunakan sintaks harta, teks ini berwarna oren
Gunakan sintaks {property} dan capai kod apa pun dengan cekap dan buat perubahan hampir seketika.
Dalam contoh di atas, apa yang telah kita lakukan diakses secara langsung sifat gaya elemen div. Jika dibandingkan dengan sifat pada objek dan atribut DOM, ini berbeza.
Dengan menggunakan ciri-ciri Angular 8 terbina dalam, kita dapat menambahkan elemen CSS ke mana-mana kelas pilihan kita. Lihat contoh di bawah untuk memahami perkara ini dengan lebih baik.
Kelas CSS menggunakan sintaks harta, teks ini berwarna biru
NgClass dan NgStyle dalam Sudut 8
Ia terbina dalam dengan ngSyntax dan ngClass di Angular 8 dan ini boleh digunakan untuk memenuhi pelbagai tujuan. Dengan cara modul yang dibina menyediakan gula untuk melaksanakan perubahan pada rentetan yang lebih kompleks daripada yang lain. Mari kita lihat sintaks untuk ngStyle di Angular 8.
gaya menggunakan ngStyle
Dalam contoh di atas, kami telah menggunakan ngStyle in Angular untuk mengubah dinamika beberapa elemen di kelas kami, sementara pada kumpulan yang sama beberapa elemen bersama-sama untuk memudahkan pengguna menyesuaikan kelas mengikut keperluannya.
Kesinambungan contoh di atas.
gaya menggunakan ngStyle + -
Sekarang setelah anda mengetahui tentang ngStyle, mari kita lihat beberapa elemen ngStyle.
rentetan kelas rentetan kelas objek kelas
ngClass in sudut juga memungkinkan kita untuk membuat perubahan pada kod kita dengan banyak cara sehingga perubahan dinamik dapat dilaksanakan dalam sekejap, seperti ngStyle.
Lihat contoh di bawah, untuk melihat kedua-duanya beraksi.
import {Component} dari '@ angular / core' @Component ({pemilih: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) kelas eksport AppComponent {color = 'pink' size = 16 displayText = 'show-class' visible = true konstruktor () {} toggle () {this.visible =! this.visible this.displayText = this.visible? 'show-class': 'hide-class'}}NgKlik dalam Sudut 8
Setelah anda mengetahui ciri-ciri asas ngClass dan ngStyle dan apa yang dapat dicapai dengan menggunakan salah satu atau kedua-duanya di platform Angular 8, mari kita perhatikan penggunaan ngClick.
Apa itu ngClick?
Sekiranya dalam acara tertentu anda perlu menyatukan banyak elemen program, sehingga satu tugas dapat dicapai, maka anda perlu memanfaatkan ngClick.
Di atas adalah contoh bagaimana ngClick digunakan di AngularJS. Ketika datang ke Angular8, modul yang sama tidak ada, dan oleh itu seseorang perlu memanfaatkan yang berikut.
apakah perbezaan antara git dan github
Sintaks di atas digunakan untuk memudahkan pengikatan peristiwa di Angular8, di mana kita pertama kali menentukan nama peristiwa sasaran bersama dengan tanda kurung dan kemudian menyertakan pernyataan templat dengan memasukkan petikan dan sama dengan operator. Setelah langkah-langkah ini selesai, Angular8 menyediakan pengendali acara untuk acara ini dan setiap kali dicetuskan, acara ini dijalankan.
Angular8 bukan sahaja salah satu bahasa pengaturcaraan yang paling popular di luar sana, tetapi juga bahasa yang paling dinamis, berkat pelbagai ciri. Dengan ini, kita mengakhiri artikel ini mengenai NgStyle secara bersudut. Saya harap anda mendapat pemahaman tentang bagaimana ini berfungsi.
lihat oleh Edureka. Angular adalah kerangka kerja JavaScript yang digunakan untuk membuat aplikasi web sisi pelanggan yang berskala, perusahaan, dan prestasi. Dengan penggunaan rangka kerja Angular tinggi, pengurusan prestasi aplikasi digerakkan oleh masyarakat secara tidak langsung mendorong peluang pekerjaan yang lebih baik. Latihan Persijilan Angular bertujuan untuk merangkumi semua konsep baru di sekitar Pembangunan Aplikasi Perusahaan.