Я ищу способ привязать функцию ко всей моей странице (когда пользователь нажимает клавишу, я хочу, чтобы она запускала функцию в моем component.ts)
В AngularJS это было легко с помощью, ng-keypress
но он не работает с (keypress)="handleInput($event)"
.
Я пробовал использовать обертку div на всей странице, но похоже, что это не работает. он работает только тогда, когда на нем сосредоточено внимание.
<div (keypress)="handleInput($event)" tabindex="1">
typescript
angular
keypress
key-bindings
L.querter
источник
источник
window:keypress
?Ответы:
Я бы использовал декоратор @HostListener в вашем компоненте:
Есть и другие варианты:
свойство хоста в
@Component
декоратореAngular рекомендует использовать
@HostListener
декоратор поверх свойства хоста https://angular.io/guide/styleguide#style-06-03renderer.listen
Observable.fromEvent
источник
esc
ключ, используйтеkeyup
event. Спасибо @TroelsLarsenfunction-key
(F1, F2, F3, ...)?Ответ yurzui не сработал для меня, это может быть другая версия RC или это может быть ошибка с моей стороны. В любом случае, вот как я сделал это с моим компонентом в Angular2 RC4 (который сейчас сильно устарел).
источник
keydown
вместоkeypress
Просто чтобы добавить к этому в 2019 году Angular 8,
вместо нажатия клавиши мне пришлось использовать нажатие клавиши
к
Рабочий Stacklitz
источник
Если вы хотите выполнить какое-либо событие при нажатии любой конкретной кнопки клавиатуры, в этом случае вы можете использовать @HostListener. Для этого вам необходимо импортировать HostListener в файл ts вашего компонента.
импортировать {HostListener} из '@ angular / core';
затем используйте функцию ниже в любом месте вашего ts файла компонента.
источник
Имейте в виду, что "document: keypress" устарел. Вместо этого мы должны использовать document: keydown.
Ссылка: https://developer.mozilla.org/fr/docs/Web/API/Document/keypress_event
источник
Я думаю, это лучше всего работает
https://angular.io/api/platform-browser/EventManager
например, в app.component
источник