টাইপস্ক্রিপ্ট টাইপ কি Angular2 ইভেন্ট


93

যদি এইচটিএমএল ফাইলে আমার নীচের বোতামটি থাকে

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

এছাড়াও, সংশ্লিষ্ট উপাদানটিতে, আমার এই ফাংশনটি রয়েছে

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

$eventইনপুট বরাদ্দ করা উচিত একটি উপযুক্ত টাইপ আছে ? ইভেন্ট প্যারামিটার নিজেই একটি অবজেক্ট, তবে আমি যদি এটি কোনও টাইপ অবজেক্টকে অর্পণ করি তবে আমি একটি ত্রুটি পাই

প্রকারের 'স্টপপ্রোপেশন' টাইপ অবজেক্টে নেই

সুতরাং, টাইপসক্রিপ্ট $eventইনপুট বিবেচনা করে ?


4
doSomething(testString: string, event: MouseEvent)
এরিক মার্টিনেজ

4
এরিক মার্টিনেজ: আপনি কি উত্তর হিসাবে আপনার মন্তব্য পোস্ট করতে পারেন? এটি আমি যে পতাকাটি পাচ্ছিলাম তার সবগুলি সাফ করে দিয়েছে, তাই আমি এটিকে সঠিক হিসাবে নিচ্ছি।
অ্যালেক্স জে

উত্তর:


77

@ অ্যালেক্সজে প্রস্তাবিত

আপনি যে ইভেন্টটি $eventপেরিয়েছেন সেটি একটি ডিওএম ইভেন্ট, সুতরাং আপনি EventNameটাইপ হিসাবে ব্যবহার করতে পারেন ।

আপনার ক্ষেত্রে এই ইভেন্টটি একটি MouseEventএবং দস্তাবেজগুলি উদ্ধৃতি দিয়ে বলে

MouseEvent ইন্টারফেস ঘটনা ব্যবহারকারী (যেমন একটি মাউস হিসাবে) একটি নির্দেশক ডিভাইসের সাথে আলাপচারিতার কারণে ঘটতে প্রতিনিধিত্ব করে। এই ইন্টারফেস ব্যবহার করে প্রচলিত ঘটনা অন্তর্ভুক্ত ক্লিক dblclick, mouseup, mousedown

এই সমস্ত ক্ষেত্রে আপনি একটি পাবেন 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


এইচটিএমএলইনপুট ইভেন্টের জন্য এই উত্তরটি দেখুন ।
hlovdal

4
এটি লক্ষ করা উচিত যে ইভেন্টটি যদি একটি কৌণিক উপাদান থেকে একটি এর মধ্যে উত্পন্ন হয় @Output, সাধারণত একটি উপাদান ক্ষেত্রের EventEmitter<T>টাইপ হয় তবে $eventআর্গুমেন্টের ধরণটি Tকৌণিক.আইও / এপি / কোর্ট / ইভেন্টএমিটার দেখুন ।
jfroy

27

কিছু সাধারণভাবে ব্যবহৃত ইভেন্ট এবং তাদের সম্পর্কিত নামগুলি ( মাউসএভেন্ট , ফোকাসইভেন্ট , টাচইভেন্ট , ড্র্যাগইভেন্ট , কীবোর্ড Event ):

| 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;
}

3

আধিকারিকের মতে eventটাইপ টাইপ করা হয় Object, আমার ক্ষেত্রেও যখন আমি eventঅবজেক্টে টাইপ করি তখন এটি কোনও ত্রুটি ছুঁড়ে না ফেলে তবে কৌনিক 2 এর ডকুমেন্টেশন পড়ার পরে eventটাইপ হয় EventEmitterতাই আপনি নিজের ইভেন্টে জাত টাইপ করতে পারেনEventEmitter

দেখুন এখানে একই http://plnkr.co/edit/8HRA3bM0NxXrzBAjWYXc?p= পূর্বরূপ দেখুন

আরও তথ্যের জন্য এখানে https://angular.io/docs/ts/latest/guide/template-syntax.html#!# আগস্ট- বাইন্ডিং দেখুন

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.