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' $event
entré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 $event
entrée?
javascript
typescript
angular
Alex J
la source
la source
doSomething(testString: string, event: MouseEvent)
Réponses:
Comme suggéré par @AlexJ
L'événement que vous avez traversé
$event
est un événement DOM, vous pouvez donc utiliser leEventName
comme type.Dans votre cas, cet événement est un
MouseEvent
, et la documentation dit, citantDans 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.ts
avec tous les types portés. Dans votre casstopPropagation()
fait partie deEvent
, prolongé parMouseEvent
.la source
@Output
champ de typeEventEmitter<T>
, généralement un composant , le type de l'$event
argument estT
. Voir angular.io/api/core/EventEmitter .Quelques événements couramment utilisés et leurs noms associés ( MouseEvent , FocusEvent , TouchEvent , DragEvent , KeyboardEvent ):
L' événement générique est associé à:
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; }
la source
Selon officiel,
event
c'est de typeObject
, également dans mon cas, lorsque je tapeevent
sur l'objet, cela ne génère aucune erreur, mais après avoir lu la documentation d'angular2 trouvéeevent
est de typeEventEmitter
afin 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
la source