Szukam sposobu na powiązanie funkcji z całą moją stroną (gdy użytkownik naciśnie klawisz, chcę, aby wyzwalał funkcję w moim komponencie.ts)
W AngularJS było łatwo z a, ng-keypress
ale nie działa (keypress)="handleInput($event)"
.
Wypróbowałem to z opakowaniem div na całej stronie, ale wygląda na to, że nie działa. działa tylko wtedy, gdy jest na nim skupiony.
<div (keypress)="handleInput($event)" tabindex="1">
typescript
angular
keypress
key-bindings
L.querter
źródło
źródło
window:keypress
?Odpowiedzi:
Użyłbym @HostListener dekorator wewnątrz komponentu:
Istnieją również inne opcje, takie jak:
obiekt gospodarza w
@Component
dekoratorzeAngular zaleca używanie
@HostListener
dekoratora zamiast właściwości hosta https://angular.io/guide/styleguide#style-06-03renderer.listen
Observable.fromEvent
źródło
esc
klucza, użyjkeyup
zdarzenia. Dziękuję @TroelsLarsenfunction-key
(F1, F2, F3, ...)?Odpowiedź yurzui nie zadziałała dla mnie, może to być inna wersja RC lub może to być błąd z mojej strony. Tak czy inaczej, oto jak to zrobiłem z moim komponentem w Angular2 RC4 (który jest teraz dość przestarzały).
źródło
keydown
zamiastkeypress
Wystarczy dodać do tego w 2019 w Angular 8,
zamiast klawisza musiałem użyć keydown
do
Praca w Stacklitz
źródło
Jeśli chcesz wykonać dowolne zdarzenie po naciśnięciu dowolnego konkretnego przycisku klawiatury, w takim przypadku możesz użyć @HostListener. W tym celu musisz zaimportować HostListener do pliku ts komponentu.
importuj {HostListener} z '@ angular / core';
następnie użyj poniższej funkcji w dowolnym miejscu w pliku ts komponentu.
źródło
Należy pamiętać, że „document: keypress” jest przestarzałe. Zamiast tego powinniśmy użyć document: keydown.
Link: https://developer.mozilla.org/fr/docs/Web/API/Document/keypress_event
źródło
Myślę, że to działa najlepiej
https://angular.io/api/platform-browser/EventManager
na przykład w app.component
źródło