ประเภท typescript คือเหตุการณ์ Angular2

หากฉันมีปุ่มต่อไปนี้ในไฟล์ html

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

นอกจากนี้ในองค์ประกอบที่เกี่ยวข้องฉันมีฟังก์ชันนี้

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

มีประเภทที่เหมาะสมที่ควรกำหนดให้กับ$eventอินพุตหรือไม่? พารามิเตอร์เหตุการณ์เป็นวัตถุ แต่ถ้าฉันกำหนดให้กับวัตถุประเภทฉันได้รับข้อผิดพลาด

ไม่มีคุณสมบัติ 'stopPropogation' บนวัตถุชนิด

typescript พิจารณา$eventอินพุตอะไรบ้าง?

ตามคำแนะนำของ @AlexJ

เหตุการณ์ที่คุณส่งผ่าน$eventเป็นเหตุการณ์ DOM ดังนั้นคุณสามารถใช้EventNameเป็นประเภทได้

ในกรณีของคุณเหตุการณ์นี้คือ a MouseEventและเอกสารกล่าวว่าการอ้างถึง

MouseEventอินเตอร์เฟซที่แสดงให้เห็นถึงเหตุการณ์ที่เกิดขึ้นเนื่องจากการที่ผู้ใช้โต้ตอบกับอุปกรณ์ชี้ตำแหน่ง (เช่นเมาส์) เหตุการณ์ที่เกิดขึ้นร่วมกันโดยใช้อินเตอร์เฟซนี้ ได้แก่คลิก DblClick, mouseup, mousedown

ในทุกกรณีคุณจะได้รับไฟล์MouseEvent.

อีกตัวอย่างหนึ่ง: หากคุณมีรหัสนี้

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

เมื่อเกิดเหตุการณ์คุณจะได้รับไฟล์FocusEvent.

ดังนั้นคุณสามารถทำได้ง่ายมากคอนโซลบันทึกเหตุการณ์แล้วคุณจะเห็นข้อความที่คล้ายกับข้อความนี้ซึ่งเราจะมีชื่อเหตุการณ์

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

คุณสามารถเยี่ยมชมเอกสารเพื่อดูรายการกิจกรรมที่มีอยู่ได้ตลอดเวลา

แก้ไข

คุณยังสามารถตรวจสอบ TypeScript dom.generated.d.tsด้วยการพิมพ์ทั้งหมดที่พอร์ต ในกรณีของคุณstopPropagation()เป็นส่วนหนึ่งของขยายโดยEventMouseEvent

เหตุการณ์ที่ใช้กันทั่วไปและชื่อที่เกี่ยวข้อง ( 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 |               |

เหตุการณ์ทั่วไปเกี่ยวข้องกับ:

• ปิด
• เปลี่ยนแปลง
• ไม่ถูกต้อง
• เล่น
• รีเซ็ต
• เลื่อน
• เลือก
• ส่ง
• สลับ
• ที่รอคอย

หากคุณขุดในที่เก็บของ typescript dom.generated.d.tsจะจัดเตรียมอินเทอร์เฟซเหตุการณ์ส่วนกลาง (เครดิตไปที่คำตอบของ Eric ) ซึ่งคุณอาจพบการแมปตัวจัดการเหตุการณ์ทั้งหมดที่บรรทัด 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;
}

ตามอย่างเป็นทางการeventเป็นประเภทObjectเช่นกันในกรณีของฉันเมื่อฉันพิมพ์eventไปที่วัตถุมันจะไม่เกิดข้อผิดพลาดใด ๆ แต่หลังจากอ่านเอกสารของ angular2 พบว่าeventเป็นประเภทEventEmitterเพื่อให้คุณสามารถพิมพ์วรรณะเหตุการณ์ของคุณลงในEventEmitter

ดูนี่คือ plunkr สำหรับhttp://plnkr.co/edit/8HRA3bM0NxXrzBAjWYXc?p=previewเดียวกัน

สำหรับข้อมูลเพิ่มเติมโปรดดูที่นี่https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding