Imbas Kembali Pengikatan Sifat dan Peristiwa
Ikat data ke dalam dan peristiwa keluar daripada komponen.
Imbas Kembali Pengikatan Sifat dan Peristiwa ialah pelajaran Angular Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Angular Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.
Dua Hala Aliran Data
Templat Angular menggerakkan data dalam dua hala: pengikatan sifat menolak data ke dalam DOM, manakala pengikatan peristiwa menghantar tindakan pengguna kembali kepada komponen.
Interpolasi
Interpolasi dengan pendakap kerinting berganda memaparkan nilai komponen sebagai teks. Ia bersifat sehala, daripada komponen kepada paparan.
<p>{{ title }}</p>
// component
title = "Dashboard";Sintaks Pengikatan Sifat
Kurungan siku mengikat nilai komponen kepada sifat unsur atau komponen. Ungkapan di sebelah kanan dinilai dan ditetapkan.
<img [src]="imageUrl" [alt]="caption">
// component
imageUrl = "/logo.png";
caption = "Logo";Mengikat kepada Input Komponen
Pengikatan sifat juga menyalurkan nilai kepada sifat @Input komponen anak.
<app-user [name]="userName"></app-user>
// parent component
userName = "Ada";Atribut berbanding Sifat
Pengikatan sifat menyasarkan sifat DOM, bukan atribut HTML. Untuk atribut semata-mata, gunakan awalan attr..
<button [attr.aria-label]="label">Save</button>Sintaks Pengikatan Peristiwa
Kurungan membolehkan peristiwa DOM diikat kepada kaedah komponen. Kaedah itu dijalankan apabila peristiwa dicetuskan.
<button (click)="save()">Save</button>
// component
save() { console.log("saved"); }Objek $event
Pemboleh ubah khas $event membawa muatan peristiwa kepada pengendali anda.
<input (input)="onInput($event)">
// component
onInput(e: Event) {
this.text = (e.target as HTMLInputElement).value;
}Mengikat kepada Output Komponen
Pengikatan peristiwa juga mendengar peristiwa @Output komponen anak yang dikeluarkan melalui EventEmitter.
<app-counter (changed)="onChange($event)"></app-counter>
// parent
onChange(value: number) { this.count = value; }Menggabungkan Kedua-dua Pengikatan
Menggunakan pengikatan sifat dan pengikatan peristiwa bersama-sama pada sifat yang sama merupakan asas pengikatan dua hala, yang akan anda lihat seterusnya.
<input [value]="name" (input)="name = $event.target.value">Pengikatan Kelas dan Gaya
Pengikatan sifat khas menogol kelas dan gaya berdasarkan keadaan komponen.
<div [class.active]="isActive"
[style.color]="textColor">
Item
</div>Mengekalkan Templat sebagai Deklaratif
Pengikatan mengekalkan hubungan antara data dan paparan secara deklaratif. Angular mengemas kini DOM secara automatik apabila nilai yang terikat berubah.
Semakan Pantas
Uji pemahaman anda tentang pengikatan sifat dan peristiwa.
Imbas Kembali
Pengikatan sifat [prop] menolak data ke paparan, pengikatan peristiwa (event) menghantar tindakan kembali, dan interpolasi memaparkan teks. Menggabungkan pengikatan sifat dan peristiwa pada nilai yang sama menyediakan pengikatan dua hala.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 38
- Pelajaran
- 144
Soalan Lazim
Adakah pelajaran “Imbas Kembali Pengikatan Sifat dan Peristiwa” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Angular Academy, termasuk “Imbas Kembali Pengikatan Sifat dan Peristiwa”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Imbas Kembali Pengikatan Sifat dan Peristiwa”?
Ikat data ke dalam dan peristiwa keluar daripada komponen. Anda berlatih Angular Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Angular Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Angular Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.
Berapa lamakah pelajaran “Imbas Kembali Pengikatan Sifat dan Peristiwa” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Angular Academy ini?
Ya. Setiap pelajaran Angular Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Imbas Kembali Pengikatan Sifat dan Peristiwa
- Pengikatan Dua Hala dengan ngModel
- Input Isyarat model()
- Sifat Tersuai yang Boleh Diikat Dua Hala