Estou procurando uma maneira de vincular uma função a minha página inteira (quando um usuário pressiona uma tecla, quero que ela acione uma função em meu component.ts)
Foi fácil no AngularJS com um, ng-keypress
mas não funciona (keypress)="handleInput($event)"
.
Eu tentei com um invólucro div em toda a página, mas não parece funcionar. só funciona quando o foco está nele.
<div (keypress)="handleInput($event)" tabindex="1">
typescript
angular
keypress
key-bindings
L.querter
fonte
fonte
window:keypress
?Respostas:
Eu usaria o decorador @HostListener em seu componente:
Existem também outras opções como:
propriedade hospedeira dentro do
@Component
decoradorA Angular recomenda o uso de
@HostListener
decorador em vez de propriedade host https://angular.io/guide/styleguide#style-06-03renderer.listen
Observable.fromEvent
fonte
esc
chave, use okeyup
evento. Obrigado a @TroelsLarsenfunction-key
(F1, F2, F3, ...)?A resposta de yurzui não funcionou para mim, pode ser uma versão RC diferente ou pode ser um erro da minha parte. De qualquer forma, aqui está como eu fiz com meu componente no Angular2 RC4 (que agora está bastante desatualizado).
fonte
keydown
vez dekeypress
Só para adicionar a isso em 2019 w Angular 8,
em vez de pressionar a tecla, tive que usar keydown
para
Stacklitz de trabalho
fonte
Se você quiser realizar qualquer evento em qualquer pressionamento de botão específico do teclado, nesse caso, você pode usar @HostListener. Para isso, você deve importar HostListener no arquivo ts do seu componente.
import {HostListener} de '@ angular / core';
em seguida, use a função abaixo em qualquer lugar no arquivo ts do seu componente.
fonte
Esteja ciente de que "document: keypress" está obsoleto. Devemos usar document: keydown em vez disso.
Link: https://developer.mozilla.org/fr/docs/Web/API/Document/keypress_event
fonte
Eu acho que isso faz o melhor trabalho
https://angular.io/api/platform-browser/EventManager
por exemplo em app.component
fonte