टाइपस्क्रिप्ट प्रकार क्या है Angular2 घटना

Question

अगर मेरे पास html फाइल में निम्नलिखित बटन है

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

इसके अलावा, इसी घटक में, मेरे पास यह फ़ंक्शन है

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

क्या एक उचित प्रकार है जिसे $eventइनपुट को सौंपा जाना चाहिए ? ईवेंट पैरामीटर अपने आप में एक ऑब्जेक्ट है, लेकिन अगर मैं इसे किसी ऑब्जेक्ट पर असाइन करता हूं, तो मुझे एक त्रुटि मिलती है

संपत्ति 'स्टॉपप्रोपोगेशन' प्रकार की वस्तु पर मौजूद नहीं है

तो, टाइपस्क्रिप्ट $eventइनपुट पर क्या विचार करता है?

Comments

doSomething(testString: string, event: MouseEvent)

— एरिक मार्टिनेज

एरिक मार्टिनेज: क्या आप एक उत्तर के रूप में अपनी टिप्पणी पोस्ट कर सकते हैं? मुझे मिलने वाले सभी झंडे साफ हो गए, इसलिए मैं इसे सही मान रहा हूं।

— एलेक्स जे

Answer 1

जैसा कि @AlexJ ने सुझाव दिया है

आपके द्वारा पास की गई घटना $eventएक DOM ईवेंट है, इसलिए आप EventNameइस प्रकार का उपयोग कर सकते हैं ।

आपके मामले में यह घटना एक है MouseEvent, और डॉक्स कहते हैं, उद्धृत करते हुए

MouseEvent इंटरफ़ेस घटनाओं है कि उपयोगकर्ता (जैसे कि एक माउस के रूप में) किसी इंगित उपकरण के साथ बातचीत के कारण होते हैं प्रतिनिधित्व करता है। इस इंटरफ़ेस का उपयोग करने वाली सामान्य घटनाओं में क्लिक, डब्लक्लिक, माउसअप, मूसडाउन शामिल हैं ।

उन सभी मामलों में आपको मिलेगा MouseEvent।

एक और उदाहरण: यदि आपके पास यह कोड है

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

जब घटना से चलाता है आप एक मिल जाएगा FocusEvent।

तो आप इसे वास्तव में सरल कर सकते हैं, कंसोल को लॉग इन कर सकते हैं और आपको इस संदेश के समान एक संदेश दिखाई देगा, जिसका नाम हमारे पास होगा

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

आप हमेशा मौजूदा ईवेंट की सूची के लिए डॉक्स पर जा सकते हैं ।

संपादित करें

आप टाइप किए dom.generated.d.tsगए सभी टाइपिंग के साथ टाइपस्क्रिप्ट के लिए भी जांच कर सकते हैं । आपके मामले stopPropagation()में Event, के द्वारा बढ़ाया गया है MouseEvent।

Comments

HTMLInputEvent प्रकार के लिए यह उत्तर देखें ।

— होवडाल

यह ध्यान दिया जाना चाहिए कि यदि घटना एक कोणीय घटक से होकर गुजरती है @Output, आमतौर पर एक प्रकार का घटक क्षेत्र है EventEmitter<T>, तो $eventतर्क का प्रकार है T। Angular.io/api/core/EventEmitter देखें ।

— jfroy

Answer 2

कुछ आमतौर पर इस्तेमाल किया घटनाओं और उनसे संबंधित नाम ( 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 |               |

सामान्य घटना से संबंधित है:

• बंद करे
• परिवर्तन
• अमान्य
• खेल
• रीसेट
• स्क्रॉल
• चुनते हैं
• प्रस्तुत
• टॉगल
• इंतज़ार कर रही

यदि आप टाइपस्क्रिप्ट के रिपॉजिटरी में खोदते हैं, तो dom.generated.d.ts एक वैश्विक ईवेंट इंटरफ़ेस प्रदान करता है (क्रेडिट एरिक के उत्तर में जाता है ) जहां आपको लाइन 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;
}

Answer 3

आधिकारिक तौर eventपर टाइप के अनुसार Object, मेरे मामले में भी, जब मैं eventऑब्जेक्ट को टाइप करता हूं तो इसमें कोई त्रुटि नहीं होती है, लेकिन एंगुलर 2 के प्रलेखन को पढ़ने के बाद पाया eventजाता है, EventEmitterताकि आप अपने ईवेंट को टाइप कर सकेंEventEmitter

यहाँ देखें वही http://plnkr.co/edit/8HRA3bM0NxXrzBAjWYXc?p=preview के लिए plunkr है

अधिक जानकारी के लिए यहां देखें https://angular.io/docs/ts/latest/guide/template-syntax.html##vent-binding!