Artikel ini adalah artikel cermin dari terjemahan mesin, silakan klik di sini untuk melompat ke artikel aslinya.

Melihat: 12212|Jawab: 0

[Sudut] Pengikatan peristiwa sudut/pengikatan atribut @HostListener, @HostBinding

[Salin tautan]
Diposting pada 26/06/2019 14.42.08 | | | |
Sebelum kita masuk ke dekorator properti HostListener dan HostBinding, mari kita lihat elemen host.

Konsep elemen host berlaku untuk instruksi dan komponen. Untuk instruksi, konsepnya cukup sederhana. Elemen yang menerapkan instruksi adalah elemen host. Katakanlah kita telah mendeklarasikan direktif HighlightDirective (pemilih: '[exeHighlight]'):

Dalam kode HTML di atas, elemen p adalah elemen host. Jika direktif diterapkan ke komponen kustom, seperti:

Dalam hal ini, elemen kustom exe-counter adalah elemen host.

HostListener adalah dekorator properti yang menambahkan mendengarkan acara ke elemen host.

Di Angular, kita dapat menggunakan dekorator HostBinding untuk mengimplementasikan pengikatan properti elemen.

Direktif ini menunjukkan cara menggunakan dekorator HostListener untuk mendengarkan peristiwa klik pengguna

Selain itu, kita juga dapat mendengarkan peristiwa yang dihasilkan oleh objek selain elemen host, seperti jendela atau dokumen atau badan
Target dapat berupa jendela, dokumen, atau isi




@HostBinding() dan @HostListener() berguna saat menyesuaikan instruksi. @HostBinding() dapat menambahkan kelas, gaya, atribut, dll. ke elemen host perintah, sedangkan @HostListener() dapat mendengarkan peristiwa pada elemen host.

Contoh: Terapkan font dan warna batas yang mengubah font dan warna batas secara real time saat Anda mengetik

Mari kita bicara tentang bagian utama dari kode di atas:
(1): Beri nama aplikasi perintah kamiPelangi
(2): Tentukan semua kemungkinan warna yang perlu kita tampilkan
(3): Tentukan dan hiasi warna dan borderColor dengan @HostBinding() untuk penataan gaya
(4): Gunakan @HostListener() untuk mendengarkan peristiwa keydown elemen host dan secara acak menetapkan warna ke color dan borderColor

Gunakan perintah ini di halaman:

Efeknya adalah sebagai berikut:







Mantan:Prinsip verifikasi tanda tangan digital SM2
Depan:js menentukan apakah fungsi dan variabel js ada
Sanggahan:
Semua perangkat lunak, materi pemrograman, atau artikel yang diterbitkan oleh Code Farmer Network hanya untuk tujuan pembelajaran dan penelitian; Konten di atas tidak boleh digunakan untuk tujuan komersial atau ilegal, jika tidak, pengguna akan menanggung semua konsekuensi. Informasi di situs ini berasal dari Internet, dan sengketa hak cipta tidak ada hubungannya dengan situs ini. Anda harus sepenuhnya menghapus konten di atas dari komputer Anda dalam waktu 24 jam setelah pengunduhan. Jika Anda menyukai program ini, harap dukung perangkat lunak asli, pembelian pendaftaran, dan dapatkan layanan asli yang lebih baik. Jika ada pelanggaran, silakan hubungi kami melalui email.

Mail To:help@itsvse.com