Welcher Typescript-Typ ist das Angular2-Ereignis?

89

Wenn ich die folgende Schaltfläche in einer HTML-Datei habe

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

Auch in der entsprechenden Komponente habe ich diese Funktion

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

Gibt es einen richtigen Typ, der dem $eventEingang zugewiesen werden sollte ? Der Ereignisparameter selbst ist ein Objekt, ABER wenn ich ihn einem Typobjekt zuordne, wird eine Fehlermeldung angezeigt

Die Eigenschaft 'stopPropogation' ist für das Typobjekt nicht vorhanden

Was berücksichtigt Typescript als $eventEingabe?

Alex J.
quelle
5
doSomething(testString: string, event: MouseEvent)
Eric Martinez
1
Eric Martinez: Können Sie Ihren Kommentar als Antwort posten? Das hat alle Flaggen geklärt, die ich bekommen habe, also nehme ich es als richtig an.
Alex J

Antworten:

74

Wie von @AlexJ vorgeschlagen

Das Ereignis, das Sie durchlaufen haben, $eventist ein DOM-Ereignis, daher können Sie das EventNameals Typ verwenden.

In Ihrem Fall handelt es sich bei diesem Ereignis um ein MouseEventZitat, wie in den Dokumenten angegeben

Die MouseEvent- Oberfläche stellt Ereignisse dar, die auftreten, wenn der Benutzer mit einem Zeigegerät (z. B. einer Maus) interagiert. Zu den allgemeinen Ereignissen, die diese Benutzeroberfläche verwenden, gehören Klicken, Doppelklicken, Mouseup und Mousedown .

In all diesen Fällen erhalten Sie eine MouseEvent.

Ein weiteres Beispiel: Wenn Sie diesen Code haben

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

Wenn das Ereignis ausgelöst wird, erhalten Sie eine FocusEvent.

Sie können dies also ganz einfach tun, indem Sie das Ereignis auf der Konsole protokollieren und eine ähnliche Meldung sehen, dass wir den Ereignisnamen haben

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

Sie können jederzeit die Dokumente besuchen, um eine Liste der vorhandenen Ereignisse anzuzeigen .

Bearbeiten

Sie können auch dom.generated.d.tsmit allen portierten Typisierungen nach TypeScript suchen. In Ihrem Fall stopPropagation()ist ein Teil von Event, erweitert um MouseEvent.

Eric Martinez
quelle
In dieser Antwort finden Sie einen HTMLInputEvent-Typ.
Hlovdal
1
Es ist zu beachten, dass der Typ des Arguments ist , wenn das Ereignis von einer Winkelkomponente über ein @Output, typischerweise ein Komponentenfeld vom Typ stammt . Siehe angle.io/api/core/EventEmitter . EventEmitter<T>$eventT
Jfroy
26

Einige häufig verwendete Ereignisse und ihre zugehörigen Namen ( 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 |               |

Das generische Ereignis ist verbunden mit:

  • schließen
  • Veränderung
  • ungültig
  • abspielen
  • zurücksetzen
  • scrollen
  • wählen
  • einreichen
  • Umschalten
  • warten

Wenn Sie im Repository von Typescript stöbern, bietet dom.generated.d.ts eine globale Ereignisschnittstelle (Gutschrift geht an Erics Antwort ), auf der Sie alle Zuordnungen der Ereignishandler in Zeile 5725 finden :

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
quelle
3

Laut offiziell eventist vom Typ Object, auch in meinem Fall, wenn ich eventin das Objekt typisetze, gibt es keinen Fehler, aber nach dem Lesen der Dokumentation von angular2 gefunden eventist vom Typ, EventEmitterso dass Sie Kaste Ihr Ereignis eingeben könnenEventEmitter

siehe hier ist plunkr für die gleiche http://plnkr.co/edit/8HRA3bM0NxXrzBAjWYXc?p=preview

Weitere Informationen finden Sie hier https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding

Pardeep Jain
quelle