TypescriptタイプとはAngular2イベントです


92

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入力を何と見なしますか?


5
doSomething(testString: string, event: MouseEvent)
Eric Martinez

1
エリック・マルティネス:あなたのコメントを答えとして投稿できますか?それは私が得ていたすべてのフラグをクリアしたので、私はそれを正しいと思っています。
Alex J

回答:


76

@AlexJによって提案されたように

通過し$eventたイベントはDOMイベントであるためEventName、タイプとしてを使用できます。

あなたの場合、このイベントはMouseEventであり、ドキュメントは引用しています

MouseEventのインターフェースは、(マウスなどの)ポインティングデバイスと対話するユーザのために発生したイベントを表しています。このインターフェイスを使用する一般的なイベントには、click、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すべてのタイピングが移植されたTypeScriptを確認することもできます。あなたの場合stopPropagation()はの一部でありEvent、によって拡張されMouseEventます。


HTMLInputEventタイプについては、この回答を参照してください。
hlovdal 2018

1
イベントがAngularコンポーネントから@Output、通常はタイプのコンポーネントフィールドを介して発生する場合EventEmitter<T>$event引数のタイプはT。であることに注意してください。angle.io/api/core/EventEmitterを参照してください。
jfroy

27

一般的に使用されるいくつかのイベントとそれに関連する名前(MouseEventFocusEventTouchEventDragEventKeyboardEvent):

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

3

公式によるeventと、タイプですObject。私の場合もevent、オブジェクトにタイプキャストしてもエラーはスローされませんが、angular2のドキュメントを読んだ後event、タイプが見つかったEventEmitterので、イベントをタイプキャストできます。EventEmitter

同じhttp://plnkr.co/edit/8HRA3bM0NxXrzBAjWYXc?p=previewのplunkrはこちらをご覧ください

詳細については、https: //angular.io/docs/ts/latest/guide/template-syntax.html#!#event- bindingを参照してください。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.