Ich suche nach einer Möglichkeit, eine Funktion an meine gesamte Seite zu binden (wenn ein Benutzer eine Taste drückt, soll sie eine Funktion in meiner component.ts auslösen).
Es war einfach in AngularJS mit einem, ng-keypress
aber es funktioniert nicht mit (keypress)="handleInput($event)"
.
Ich habe es mit einem Div-Wrapper auf der ganzen Seite versucht, aber es scheint nicht zu funktionieren. es funktioniert nur, wenn der Fokus darauf liegt.
<div (keypress)="handleInput($event)" tabindex="1">
typescript
angular
keypress
key-bindings
L.querter
quelle
quelle
window:keypress
?Antworten:
Ich würde @ HostListener Decorator in Ihrer Komponente verwenden:
Es gibt auch andere Optionen wie:
Host-Eigenschaft innerhalb
@Component
DekorateurAngular empfiehlt die Verwendung von
@HostListener
Decorator über die Host-Eigenschaft https://angular.io/guide/styleguide#style-06-03renderer.listen
Observable.fromEvent
quelle
esc
Schlüssel benötigen , verwenden Siekeyup
event. Vielen Dank an @TroelsLarsenfunction-key
(F1, F2, F3, ...) erkennen?Die Antwort von yurzui hat bei mir nicht funktioniert, es könnte sich um eine andere RC-Version handeln oder um einen Fehler von meiner Seite. So oder so habe ich es mit meiner Komponente in Angular2 RC4 gemacht (die jetzt ziemlich veraltet ist).
quelle
keydown
stattdessenkeypress
Nur um dies im Jahr 2019 w Angular 8 hinzuzufügen,
Anstelle des Tastendrucks musste ich Keydown verwenden
zu
Working Stacklitz
quelle
Wenn Sie ein Ereignis auf einem bestimmten Tastendruck ausführen möchten, können Sie in diesem Fall @HostListener verwenden. Dazu müssen Sie HostListener in Ihre ts-Datei importieren.
{HostListener} aus '@ angle / core' importieren;
Verwenden Sie dann die folgende Funktion an einer beliebigen Stelle in der ts-Datei Ihrer Komponente.
quelle
Beachten Sie, dass "document: keypress" veraltet ist. Wir sollten stattdessen document: keydown verwenden.
Link: https://developer.mozilla.org/fr/docs/Web/API/Document/keypress_event
quelle
Ich denke, das macht den besten Job
https://angular.io/api/platform-browser/EventManager
zum Beispiel in app.component
quelle