Input Isyarat model()
Cipta pengikatan dua hala dengan isyarat model.
Input Isyarat model() ialah pelajaran Angular Academy percuma di CoddyKit. Ini ialah pelajaran 3 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.
Isyarat Bertemu Pengikatan Dua Hala
Angular moden menawarkan model(), iaitu cara berasaskan isyarat untuk mencipta input yang boleh diikat dua hala tanpa pasangan input/output manual.
Mengisytiharkan Input model
Panggil model() untuk mencipta isyarat boleh tulis yang boleh diikat dua hala oleh induk.
import { Component, model } from "@angular/core";
@Component({ selector: "app-toggle", template: "" })
export class ToggleComponent {
checked = model(false);
}Mengikat daripada Induk
Induk menggunakan sintaks pisang dalam kotak pada nama model, sama seperti ngModel.
<app-toggle [(checked)]="isOn"></app-toggle>
// parent
isOn = signal(true);Membaca Nilai model
model ialah isyarat, jadi bacanya dengan memanggilnya seperti fungsi.
export class ToggleComponent {
checked = model(false);
describe() {
return this.checked() ? "on" : "off";
}
}Menulis kepada model
Kemas kini model dengan set atau update. Perubahan itu disebarkan kembali kepada induk secara automatik.
toggle() {
this.checked.update(c => !c);
}
// or
turnOn() {
this.checked.set(true);
}Input model Diperlukan
Gunakan model.required() apabila induk mesti memberikan nilai.
import { model } from "@angular/core";
export class FieldComponent {
value = model.required<string>();
}Menggunakan model dalam Templat
Ikat isyarat model secara terus dalam templat komponen sendiri; memanggilnya akan memberikan nilai semasa.
@Component({
selector: "app-toggle",
template: "<button (click)='flip()'>{{ checked() }}</button>"
})
export class ToggleComponent {
checked = model(false);
flip() { this.checked.update(v => !v); }
}Tidak Perlu Output Manual
Dengan model(), anda tidak perlu mengisytiharkan @Output yang berasingan. Angular menyediakan pengikatan peristiwa perubahan untuk anda menggunakan nama konvensyen ditambah Change.
model berbanding input
input() biasa hanya boleh dibaca dalam komponen, manakala model() boleh ditulis dan menyokong pengikatan dua hala kembali kepada induk.
// read-only:
label = input("");
// two-way writable:
value = model("");Pembilang dengan model
Berikut ialah pembilang serba lengkap yang nilainya kekal disegerakkan dengan induk.
@Component({
selector: "app-counter",
template: "<button (click)='inc()'>{{ count() }}</button>"
})
export class CounterComponent {
count = model(0);
inc() { this.count.update(c => c + 1); }
}Bila Hendak Menggunakan model
Gunakan model() apabila komponen anak memiliki nilai yang turut ingin dibaca dan dikemas kini oleh induk, seperti kawalan borang tersuai, togol dan pelungsur.
Semakan Pantas
Uji pemahaman anda tentang input isyarat model.
Imbas Kembali
Fungsi model() mencipta isyarat boleh tulis yang menyokong pengikatan dua hala tanpa pasangan input/output manual. Bacanya dengan memanggilnya, tulis dengan set atau update, dan ikat daripada induk menggunakan [(name)].
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 “Input Isyarat model()” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Angular Academy, termasuk “Input Isyarat model()”, 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 “Input Isyarat model()”?
Cipta pengikatan dua hala dengan isyarat model. 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 3 daripada 4.
Berapa lamakah pelajaran “Input Isyarat model()” 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