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유형으로 사용할 수 있습니다 .
귀하의 경우이 이벤트는 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.
@Output일반적으로 유형의 구성 요소 필드를 통해 Angular 구성 요소에서 시작된 경우 인수 EventEmitter<T>유형은 $event입니다 T. angular.io/api/core/EventEmitter를 참조하십시오 .
일반적으로 사용되는 일부 이벤트 및 관련 이름 ( 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;
}
official eventis of type 에 따르면 Object, 내 경우에도 eventObject에 typecaste 할 때 오류가 발생하지 않지만 angular2의 문서를 읽은 후 발견 event된 유형이 EventEmitter있으므로 이벤트를 입력 할 수 있습니다.EventEmitter
동일한 http://plnkr.co/edit/8HRA3bM0NxXrzBAjWYXc?p=preview에 대한 plunkr는 여기를 참조하십시오
자세한 내용은 여기를 참조하십시오 https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding
doSomething(testString: string, event: MouseEvent)