Angular 4 - gérer deux événements en même temps

Question

Je veux gérer un événement click + événement CTRL keypress dans la même fonction dans mon fichier component.ts, mais je ne trouve pas de solution nulle part. J'ai essayé:

@HostListener("click") 
    onDropdownItemClick(evt: keyboardEvent) { 
     console.log(evt.keyCode); 
    } 

mais il retourne juste « erreur TypeError: Impossible de lire la propriété « codeTouche » undefined »

J'ai aussi essayé cela aussi:

@Component({ 
     selector: '....', 
     templateUrl: '....', 
     host: { 
      '(window:keydown)': 'findKey($event)', 
      '(window:mousedown)': 'findKey($event)' 
     } 
    }); 

findKey(event) { 
     if(event.ctrlKey && event.which === 1){ 
       console.log("CTRL + mouse-click"); 
     } 
    } 

Mais c'est ne fonctionne pas non plus. Quelqu'un a des suggestions sur la façon d'attraper les deux événements en même temps?

Answer 1

L'événement MouseEvent fournit une propriété ctrlKey qui permet de lire l'état de la Ctrl état clé lorsque le clic est arrivé

@HostListener("click", ['$event']) 
onDropdownItemClick(evt: MouseEvent) { 
    console.log('clicked - with ctrl pressed:', evt.ctrlKey); 
} 

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/ctrlKey

magasin juste l'état de la clé de contrôle dans un champ et le lire dans l'événement click:

ctrlDown = false; 

@HostListener('window:keydown.ctrl') 
onCtrlDown() {this.ctrlDown = true; } 

@HostListener('window:keydown.ctrl') 
onCtrlUp() {this.ctrlDown = false; } 

@HostListener("click") 
onDropdownItemClick(evt: keyboardEvent) { 
    console.log('clicked - with ctrl pressed:', this.ctrlDown); 
} 

Si ci-dessus ne fonctionne pas s'il vous plaît essayer

@HostListener('window:keydown', ['$event']) 
onCtrlDown(event) {this.ctrlDown = event.ctrlKey; } 

@HostListener('window:keydown') 
onCtrlUp() {this.ctrlDown = false; }