Saya mencari cara untuk mengikat fungsi ke seluruh halaman saya (ketika pengguna menekan sebuah tombol, saya ingin itu memicu fungsi di component.ts saya)
Itu mudah di AngularJS dengan ng-keypress
tetapi tidak berhasil (keypress)="handleInput($event)"
.
Saya mencobanya dengan pembungkus div di seluruh halaman tetapi tampaknya tidak berhasil. itu hanya bekerja jika fokusnya ada padanya.
<div (keypress)="handleInput($event)" tabindex="1">
typescript
angular
keypress
key-bindings
L. penakluk
sumber
sumber
window:keypress
?Jawaban:
Saya akan menggunakan dekorator @HostListener dalam komponen Anda:
Ada juga opsi lain seperti:
properti tuan rumah dalam
@Component
dekoratorAngular merekomendasikan penggunaan
@HostListener
dekorator pada properti host https://angular.io/guide/styleguide#style-06-03renderer.listen
Observable.fromEvent
sumber
esc
kuncinya, gunakankeyup
event. Terima kasih kepada @TroelsLarsenfunction-key
(F1, F2, F3, ...)?Jawaban yurzui tidak berhasil untuk saya, mungkin versi RC yang berbeda, atau mungkin kesalahan di pihak saya. Bagaimanapun, inilah cara saya melakukannya dengan komponen saya di Angular2 RC4 (yang sekarang sudah cukup usang).
sumber
keydown
sebagai penggantikeypress
Hanya untuk menambahkan ini di 2019 w Angular 8,
Alih-alih menekan tombol, saya harus menggunakan tombol ke bawah
untuk
Bekerja Stacklitz
sumber
Jika Anda ingin melakukan acara apa pun pada penekanan tombol keyboard tertentu, dalam hal ini, Anda dapat menggunakan @HostListener. Untuk ini, Anda harus mengimpor HostListener di file ts komponen Anda.
impor {HostListener} dari '@ angular / core';
kemudian gunakan fungsi di bawah ini di mana saja di file ts komponen Anda.
sumber
Berhati-hatilah karena "document: keypress" sudah tidak digunakan lagi. Kita harus menggunakan document: keydown sebagai gantinya.
Tautan: https://developer.mozilla.org/fr/docs/Web/API/Document/keypress_event
sumber
Saya pikir ini melakukan pekerjaan terbaik
https://angular.io/api/platform-browser/EventManager
misalnya di app.component
sumber