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 $event
Eingang 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 $event
Eingabe?
javascript
typescript
angular
Alex J.
quelle
quelle
doSomething(testString: string, event: MouseEvent)
Antworten:
Wie von @AlexJ vorgeschlagen
Das Ereignis, das Sie durchlaufen haben,
$event
ist ein DOM-Ereignis, daher können Sie dasEventName
als Typ verwenden.In Ihrem Fall handelt es sich bei diesem Ereignis um ein
MouseEvent
Zitat, wie in den Dokumenten angegebenIn 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.ts
mit allen portierten Typisierungen nach TypeScript suchen. In Ihrem FallstopPropagation()
ist ein Teil vonEvent
, erweitert umMouseEvent
.quelle
@Output
, typischerweise ein Komponentenfeld vom Typ stammt . Siehe angle.io/api/core/EventEmitter .EventEmitter<T>
$event
T
Einige häufig verwendete Ereignisse und ihre zugehörigen Namen ( MouseEvent , FocusEvent , TouchEvent , DragEvent , KeyboardEvent ):
Das generische Ereignis ist verbunden mit:
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; }
quelle
Laut offiziell
event
ist vom TypObject
, auch in meinem Fall, wenn ichevent
in das Objekt typisetze, gibt es keinen Fehler, aber nach dem Lesen der Dokumentation von angular2 gefundenevent
ist vom Typ,EventEmitter
so 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
quelle