Typecript türü Angular2 olayıdır

93

Bir html dosyasında aşağıdaki butona sahipsem

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

Ayrıca, ilgili bileşende bu işleve sahibim

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

$eventGirişe atanması gereken uygun bir tip var mı? Olay parametresinin kendisi bir nesnedir, ANCAK onu bir tür nesnesine atarsam hata alırım

'StopPropogation' özelliği, tür nesnesinde mevcut değil

Öyleyse, Typescript $eventgirişi neyi dikkate alıyor ?

javascript  typescript  angular 
— Alex J
kaynak
5
doSomething(testString: string, event: MouseEvent)
— Eric Martinez
1
Eric Martinez: Yorumunuzu yanıt olarak gönderebilir misiniz? Bu, aldığım tüm bayrakları temizledi, bu yüzden doğru olarak alıyorum.
— Alex J

Yanıtlar:

77

@AlexJ tarafından önerildiği gibi

Eğer geçerek olay $eventnedenle kullanabilirsiniz bir DOM olaydır EventNametürü olarak.

Sizin durumunuzda bu olay bir MouseEventve dokümanlar alıntı yaparak

MouseEvent arayüzü (örneğin, bir fare gibi) bir işaret aygıtı ile etkileşim kullanıcı nedeniyle meydana gelen olayları temsil eder. Bu arayüzü kullanan yaygın olaylar arasında tıklama, dblclick, fareyle üzerine gelme, fare indirme yer alır .

Tüm bu durumlarda bir MouseEvent.

Başka bir örnek: bu koda sahipseniz

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

Olay tetiklendiğinde bir FocusEvent.

Yani bunu gerçekten basit bir şekilde yapabilirsiniz, konsolda olayı günlüğe kaydedin ve buna benzer bir mesaj göreceksiniz, bu da bizim olay adına

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

Mevcut Etkinliklerin listesi için her zaman dokümanları ziyaret edebilirsiniz .

Düzenle

Ayrıca dom.generated.d.ts, taşınan tüm yazımlarla TypeScript'i de kontrol edebilirsiniz . Senin durumunda , uzatılmış bir stopPropagation()parçası .EventMouseEvent

— Eric Martinez
kaynak
HTMLInputEvent türü için bu yanıta bakın .
— hlovdal
1
Olay @Output, tipik olarak bir tip bileşen alanı aracılığıyla bir Angular bileşenden kaynaklanıyorsa EventEmitter<T>, o zaman $eventargümanın türünün olduğu unutulmamalıdır T. Angular.io/api/core/EventEmitter sayfasına bakın .
— jfroy
27

Yaygın olarak kullanılan bazı olaylar ve bunlarla ilgili isimler ( 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 |               |

Genel Olay şunlarla ilişkilidir:

  • kapat
  • değişiklik
  • geçersiz
  • Oyna
  • Sıfırla
  • kaydırma
  • seç
  • Sunmak
  • geçiş yapmak
  • beklemek

Eğer kazmak ise typescript en depo, dom.generated.d.ts bir sağlar küresel olaylar arabirimini (kredi gider Eric'in cevap size hiç olay işleyicileri eslestirilmesinde olabilir) hattı 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;
}
— CPHPython
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.