Quel type de Typescript est l'événement Angular2

89

Si j'ai le bouton suivant dans un fichier html

<button (click)="doSomething('testing', $event)">Do something</button>

Aussi, dans le composant correspondant, j'ai cette fonction

doSomething(testString: string, event){
    event.stopPropagation();
    console.log(testString + ': I am doing something');
}

Y a-t-il un type approprié qui devrait être attribué à l' $evententrée? Le paramètre d'événement lui-même est un objet, MAIS si je l'assigne à un objet de type, j'obtiens une erreur

La propriété 'stopPropogation' n'existe pas sur l'objet type

Alors, que considère Typescript comme $evententrée?

Alex J
la source
5
doSomething(testString: string, event: MouseEvent)
Eric Martinez
1
Eric Martinez: Pouvez-vous poster votre commentaire comme réponse? Cela a éclairci tous les drapeaux que je recevais, donc je considère que c'est correct.
Alex J

Réponses:

74

Comme suggéré par @AlexJ

L'événement que vous avez traversé $eventest un événement DOM, vous pouvez donc utiliser le EventNamecomme type.

Dans votre cas, cet événement est un MouseEvent, et la documentation dit, citant

L' interface MouseEvent représente les événements qui se produisent en raison de l'interaction de l'utilisateur avec un périphérique de pointage (tel qu'une souris). Les événements courants utilisant cette interface sont les suivants: click, dblclick, mouseup, mousedown .

Dans tous ces cas, vous obtiendrez un fichier MouseEvent.

Un autre exemple: si vous avez ce code

<input type="text" (blur)="event($event)"

Lorsque l'événement se déclenche, vous obtenez un fichier FocusEvent.

Ainsi, vous pouvez le faire très simplement, consigner l'événement sur la console et vous verrez un message similaire à celui-ci qui aura le nom de l'événement

FocusEvent {isTrusted: true, relatedTarget: null, view: Window, detail: 0, which: 0…}

Vous pouvez toujours consulter la documentation pour obtenir une liste des événements existants .

Éditer

Vous pouvez également vérifier TypeScript dom.generated.d.tsavec tous les types portés. Dans votre cas stopPropagation()fait partie de Event, prolongé par MouseEvent.

Eric Martinez
la source
Consultez cette réponse pour un type HTMLInputEvent.
hlovdal
1
Il convient de noter que si l'événement provient d'un composant angulaire via un @Outputchamp de type EventEmitter<T>, généralement un composant , le type de l' $eventargument est T. Voir angular.io/api/core/EventEmitter .
jfroy
26

Quelques événements couramment utilisés et leurs noms associés ( MouseEvent , FocusEvent , TouchEvent , DragEvent , KeyboardEvent ):

| MouseEvent | FocusEvent |  TouchEvent | DragEvent | KeyboardEvent |
|:----------:|:----------:|:-----------:|:---------:|:-------------:|
|    click   |    focus   |  touchstart |    drag   |    keypress   |
|   mouseup  |    blur    |  touchmove  |    drop   |     keyup     |
| mouseleave |   focusin  | touchcancel |  dragend  |    keydown    |
|  mouseover |  focusout  |   touchend  |  dragover |               |

L' événement générique est associé à:

  • proche
  • changement
  • invalide
  • jouer
  • réinitialiser
  • faire défiler
  • sélectionner
  • soumettre
  • basculer
  • attendre

Si vous creusez dans le référentiel de Typescript , dom.generated.d.ts fournit une interface d'événements globaux (le mérite revient à la réponse d' Eric ) où vous pouvez trouver tous les mappages de gestionnaires d'événements à la ligne 5725 :

interface GlobalEventHandlersEventMap {
  "abort": UIEvent;
  "animationcancel": AnimationEvent;
  "animationend": AnimationEvent;
  "animationiteration": AnimationEvent;
  "animationstart": AnimationEvent;
  "auxclick": MouseEvent;
  "blur": FocusEvent;
  "cancel": Event;
  "canplay": Event;
  "canplaythrough": Event;
  "change": Event;
  "click": MouseEvent;
  "close": Event;
  "contextmenu": MouseEvent;
  "cuechange": Event;
  "dblclick": MouseEvent;
  "drag": DragEvent;
  "dragend": DragEvent;
  "dragenter": DragEvent;
  "dragexit": Event;
  "dragleave": DragEvent;
  "dragover": DragEvent;
  "dragstart": DragEvent;
  "drop": DragEvent;
  "durationchange": Event;
  "emptied": Event;
  "ended": Event;
  "error": ErrorEvent;
  "focus": FocusEvent;
  "focusin": FocusEvent;
  "focusout": FocusEvent;
  "gotpointercapture": PointerEvent;
  "input": Event;
  "invalid": Event;
  "keydown": KeyboardEvent;
  "keypress": KeyboardEvent;
  "keyup": KeyboardEvent;
  "load": Event;
  "loadeddata": Event;
  "loadedmetadata": Event;
  "loadend": ProgressEvent;
  "loadstart": Event;
  "lostpointercapture": PointerEvent;
  "mousedown": MouseEvent;
  "mouseenter": MouseEvent;
  "mouseleave": MouseEvent;
  "mousemove": MouseEvent;
  "mouseout": MouseEvent;
  "mouseover": MouseEvent;
  "mouseup": MouseEvent;
  "pause": Event;
  "play": Event;
  "playing": Event;
  "pointercancel": PointerEvent;
  "pointerdown": PointerEvent;
  "pointerenter": PointerEvent;
  "pointerleave": PointerEvent;
  "pointermove": PointerEvent;
  "pointerout": PointerEvent;
  "pointerover": PointerEvent;
  "pointerup": PointerEvent;
  "progress": ProgressEvent;
  "ratechange": Event;
  "reset": Event;
  "resize": UIEvent;
  "scroll": Event;
  "securitypolicyviolation": SecurityPolicyViolationEvent;
  "seeked": Event;
  "seeking": Event;
  "select": Event;
  "selectionchange": Event;
  "selectstart": Event;
  "stalled": Event;
  "submit": Event;
  "suspend": Event;
  "timeupdate": Event;
  "toggle": Event;
  "touchcancel": TouchEvent;
  "touchend": TouchEvent;
  "touchmove": TouchEvent;
  "touchstart": TouchEvent;
  "transitioncancel": TransitionEvent;
  "transitionend": TransitionEvent;
  "transitionrun": TransitionEvent;
  "transitionstart": TransitionEvent;
  "volumechange": Event;
  "waiting": Event;
  "wheel": WheelEvent;
}
CPHPython
la source
3

Selon officiel, eventc'est de type Object, également dans mon cas, lorsque je tape eventsur l'objet, cela ne génère aucune erreur, mais après avoir lu la documentation d'angular2 trouvée eventest de type EventEmitterafin que vous puissiez taper votre événement dansEventEmitter

voir ici est plunkr pour le même http://plnkr.co/edit/8HRA3bM0NxXrzBAjWYXc?p=preview

pour plus d'informations, reportez-vous ici https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding

Pardeep Jain
la source