[Angular] 이벤트 바인딩

이벤트 바인딩

 

passive 이벤트 바인딩

Angular는 passive 이벤트 리스터를 지원한다. 아래대로 따라하면 스크롤 이벤트를 passive하게 사용가능하다.

1. src 폴더 하위에 zone-flags.ts 파일을 만든다.
2. 아래 코드를 파일에 추가한다.

(window as any)['__zone_symbol__PASSIVE_EVENTS'] = ['scroll'];​

3. src/polyfilles.ts 파일에 zone.js 를 import 하기 전에 새로만든 파일인 zone-flag.ts 를 import 한다.

import './zone-flags';
import 'zone.js';  // Included with Angular CLI.​

위 과정을 모두 마치면 scroll 이벤트를 위한 이벤트 리스너를 추가할 때, 리스너는 passive 해진다.

 

passive 이벤트?

https://withhsunny.tistory.com/106

EventTarget.addEventListener()의 Passive 옵션 알아보기

 

 

EventEmitter로 커스텀 이벤트 만들기

디렉티브는 Angular의 EventEmmiter를 다음과 같이 사용함으로써 커스텀 이벤트를 발생시킨다.

1. 디렉티브는 EventEmitter를 만들고 프로퍼티로써 이를 노출시킨다.
2. 그런 다음 디렉티브는 EventEmitter.emit(data)를 호출하여 이벤트를 내보내고 data를 전달한다.
3. 상위 디렉티브는 이 프로퍼티를 바인딩함으로써 이벤트를 수신하고, $event 객체를 통해 데이터에 접근한다.

 

예제

커스텀 이벤트: deleteRequest

<app-item-detail (deleteRequest)="deleteItem($event)" [item]="currentItem"></app-item-detail>

 

 

참고사이트

https://angular.io/guide/event-binding

Angular