Je cherche un moyen de lier une fonction à toute ma page (quand un utilisateur appuie sur une touche, je veux qu’il déclenche une fonction dans mes
C’était facile dans Angular 1 avec un ng-keypress
mais ça ne fonctionnait pas avec (keypress)="handleInput($event)"
.
Je l’ai essayé avec un wrapper div sur toute la page mais cela ne semble pas fonctionner. cela ne fonctionne que lorsque l’accent est mis sur elle.
Je vous remercie!
- Erreur TypeScript dans le code Angular2: impossible de trouver le nom ‘module’
- Quelle est la différence entre composant et directive?
- Comment gérer l’exception «expression a été vérifiée après vérification» d’Angular2 lorsqu’une propriété de composant dépend de la date / heure actuelle
- Comment renommer un composant dans CLI angular?
- Comment filtrer un tableau avec TypeScript dans Angular 2?
- Angular2 Si ngModel est utilisé dans une balise de formulaire, l’atsortingbut name doit être défini ou la forme
- Observable.of n’est pas une fonction
- @HostBinding et @HostListener: que font-ils et à quoi servent-ils?
- Angular2 http.get (), map (), subscribe () et modèle observable – compréhension de base
- Quelles sont les différences entre SystemJS et Webpack?
J’utiliserais le décorateur @HostListener dans votre composant:
import { HostListener } from '@angular/core'; @Component({ ... }) export class AppComponent { @HostListener('document:keypress', ['$event']) handleKeyboardEvent(event: KeyboardEvent) { this.key = event.key; } }
Il y a aussi d’autres options comme:
propriété hôte dans @Component
décorateur
Angular recommande d’utiliser @HostListener
décorateur sur la propriété hôte https://angular.io/guide/styleguide#style-06-03
@Component({ ... host: { '(document:keypress)': 'handleKeyboardEvent($event)' } }) export class AppComponent { handleKeyboardEvent(event: KeyboardEvent) { console.log(event); } }
renderer.listen
import { Component, Renderer2 } from '@angular/core'; @Component({ ... }) export class AppComponent { globalListenFunc: Function; constructor(private renderer: Renderer2) {} ngOnInit() { this.globalListenFunc = this.renderer.listen('document', 'keypress', e => { console.log(e); }); } ngOnDestroy() { // remove listener this.globalListenFunc(); } }
Observable.fromEvent
import { Observable } from 'rxjs/Observable'; import 'rxjs/add/observable/fromEvent'; import { Subscription } from 'rxjs/Subscription'; @Component({ ... }) export class AppComponent { subscription: Subscription; ngOnInit() { this.subscription = Observable.fromEvent(document, 'keypress').subscribe(e => { console.log(e); }) } ngOnDestroy() { this.subscription.unsubscribe(); } }
La réponse de yurzui n’a pas fonctionné pour moi, il pourrait s’agir d’une version RC différente, ou cela pourrait être une erreur de ma part. De toute façon, voici comment je l’ai fait avec mon composant dans Angular2 RC4.
@Component({ ... host: { '(document:keydown)': 'handleKeyboardEvents($event)' } }) export class MyComponent { ... handleKeyboardEvents(event: KeyboardEvent) { this.key = event.which || event.keyCode; } }
Si vous souhaitez effectuer un événement sur un bouton du clavier spécifique, vous pouvez dans ce cas utiliser @HostListener. Pour cela, vous devez importer HostListener dans votre fichier de composant ts.
import {HostListener} depuis ‘@ angular / core’;
puis utilisez la fonction ci-dessous n’importe où dans votre fichier de composant ts.
@HostListener('document:keyup', ['$event']) handleDeleteKeyboardEvent(event: KeyboardEvent) { if(event.key === 'Delete') { // remove something... } }
- Événements mondiaux à Angular
- Angular HTTP GET avec l’erreur TypeScript http.get (…) .map n’est pas une fonction dans
- Comment puis-je sélectionner un élément dans un modèle de composant?
- Impossible de se lier à ‘formGroup’ car ce n’est pas une propriété connue de ‘form’
- Quel est l’équivalent de ngShow et ngHide dans Angular?