Che tipo di typescript è l'evento Angular2


93

Se ho il seguente pulsante in un file html

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

Inoltre, nel componente corrispondente, ho questa funzione

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

Esiste un tipo appropriato da assegnare $eventall'ingresso? Il parametro dell'evento stesso è un oggetto, MA se lo assegno a un tipo di oggetto, ottengo un errore

La proprietà "stopPropogation" non esiste nel tipo di oggetto

Allora, cosa considera l' $eventinput Typescript ?


5
doSomething(testString: string, event: MouseEvent)
Eric Martinez

1
Eric Martinez: Puoi pubblicare il tuo commento come risposta? Questo ha chiarito tutte le bandiere che stavo ricevendo, quindi lo ritengo corretto.
Alex J

Risposte:


77

Come suggerito da @AlexJ

L'evento che hai attraversato $eventè un evento DOM, quindi puoi usare EventNamecome tipo.

Nel tuo caso questo evento è un MouseEvent, e la documentazione dice, citando

L' interfaccia MouseEvent rappresenta gli eventi che si verificano a causa dell'interazione dell'utente con un dispositivo di puntamento (come un mouse). Gli eventi comuni che utilizzano questa interfaccia includono clic, doppio clic, mouseup, mousedown .

In tutti questi casi otterrai un file MouseEvent.

Un altro esempio: se hai questo codice

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

Quando l'evento si attiva, riceverai un file FocusEvent.

Quindi puoi farlo in modo molto semplice, la console registra l'evento e vedrai un messaggio simile a questo che avremo il nome dell'evento

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

Puoi sempre visitare la documentazione per un elenco di eventi esistenti .

modificare

Puoi anche controllare TypeScript dom.generated.d.tscon tutte le digitazioni portate. Nel tuo caso stopPropagation()fa parte di Event, esteso da MouseEvent.


Vedi questa risposta per un tipo HTMLInputEvent.
hlovdal

1
Va notato che se l'evento ha origine da un componente angolare attraverso un @Outputcampo di tipo EventEmitter<T>, tipicamente un componente , il tipo $eventdell'argomento è T. Vedi angular.io/api/core/EventEmitter .
jfroy

27

Alcuni eventi di uso comune e i relativi nomi ( 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' Evento generico è associato a:

  • vicino
  • modificare
  • non valido
  • giocare
  • Ripristina
  • scorrere
  • Selezionare
  • Invia
  • toggle
  • in attesa

Se scavi nel repository di Typescript , dom.generated.d.ts fornisce un'interfaccia di eventi globali (il merito va alla risposta di Eric ) dove puoi trovare tutte le mappature dei gestori di eventi alla riga 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;
}

3

Secondo il funzionario eventè di tipo Object, anche nel mio caso quando eventdigito nell'oggetto non eventviene generato alcun errore, ma dopo aver letto la documentazione di angular2 trovato è di tipo EventEmitterquindi puoi digitare caste il tuo evento inEventEmitter

vedi qui è plunkr per lo stesso http://plnkr.co/edit/8HRA3bM0NxXrzBAjWYXc?p=preview

per maggiori informazioni fare riferimento qui https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.