02 템플릿 구문 07

이벤트 바인딩 (event)

지금까지 만난 바인딩 디렉티브는 컴포넌트에서 엘리먼트로 데이터를 한 방향으로 이동시킵니다.

사용자는 화면을 응시하지 않습니다. 입력 박스에 텍스트를 입력합니다. 목록에서 항목을 선택합니다.  버튼을 클릭합니다. 이러한 사용자 동작으로 인해 엘리먼트에서 컴포넌트로의 반대 방향으로 데이터 흐름이 발생할 수 있습니다.

사용자 작업에 대해 알 수있는 유일한 방법은 키 입력, 마우스 이동, 클릭 및 터치와 같은 특정 이벤트를 수신하는 것입니다. Angular 이벤트 바인딩을 통해 사용자 작업을 처리할 수 있습니다.

이벤트 바인딩 구문은 등호 왼쪽에 괄호 안에있는 목표 이벤트 이름과 오른쪽에 인용 된 템플리트 명령문으로 구성됩니다. 다음 이벤트 바인딩은 클릭이 발생할 때마다 컴포넌트의 onSave() 메서드를 호출하여 버튼의 클릭 이벤트를 수신합니다.

src/app/app.component.html

<button (click)="onSave()">Save</button>

 

대상 이벤트

괄호 사이의 이름(예 : (click))은 대상 이벤트를 식별합니다. 다음 예제에서 대상은 버튼의 클릭 이벤트입니다.

<button (click)="onSave()">Save</button>

표준 양식으로 알려진 on-.접두어를 사용할 수도 있습니다.

<button on-click="onSave()">On Save</button>

엘리먼트 이벤트는보다 일반적인 대상이 될 수 있지만 Angular는 먼저 다음 예제에서와 같이 이름이 알려진 디렉티브의 이벤트 프로퍼티와 일치하는지 확인합니다.

<!-- `myClick` is an event on the custom `ClickDirective` --> <div (myClick)="clickMessage=$event" clickable>click with myClick</div>

이름이 알려진 디렉티브의 엘리먼트 이벤트 또는 출력 등록 정보와 일치하지 않으면 Angular는 "알 수없는 디렉티브"오류를 보고합니다.

 

$event 및 이벤트 처리 문

이벤트 바인딩에서 Angular는 대상 이벤트에 대한 이벤트 처리기를 설정합니다.

이벤트가 발생하면 핸들러는 템플리트 명령문을 실행합니다. 템플릿 문은 일반적으로 HTML 컨트롤의 값을 모델에 저장하는 등 이벤트에 응답하여 작업을 수행하는 수신기를 포함합니다.

바인딩은 $ event라는 이벤트 객체를 통해 데이터 값을 포함하여 이벤트에 대한 정보를 전달합니다.

이벤트 객체의 모양은 대상 이벤트에 의해 결정됩니다. 대상 이벤트가 기본 DOM 엘리먼트 이벤트인 경우 $event는 target 및 target.value와 같은 속성을 갖는 DOM 이벤트 객체입니다.

다음 예제를 보시기 바랍니다.

<input [value]="currentHero.name"        (input)="currentHero.name=$event.target.value" >

이 코드는 name 프로퍼티에 바인딩하여 입력 박스 value 프로퍼티를 설정합니다. 값의 변경 내용을 수신하기 위해 코드는 입력 박스의 input 이벤트에 바인딩합니다. 사용자가 변경하면 input 이벤트가 발생하고 DOM 이벤트 객체 인 $event를 포함하는 컨텍스트 내에서 바인딩이 실행됩니다.

name 프로퍼티를 업데이트하려면 $event.target.value 경로를 따라 변경된 텍스트가 검색됩니다.

이벤트가 디렉티브에 속하면 (컴포넌트가 디렉티브임을 상기) $event는 디렉티브가 생성하기로 결정한 모양을 가집니다.

 

EventEmitter를 사용한 맞춤 이벤트

디렉티브는 일반적으로 Angular EventEmitter를 사용하여 사용자 지정 이벤트를 발생시킵니다. 디렉티브는 EventEmitter.emit(payload)를 호출하여 이벤트를 발생시키고 어떤 것도 될 수있는 메시지 페이로드를 전달합니다. 부모 디렉티브는 이 프로퍼티에 바인딩하고 $event 객체를 통해 페이로드에 액세스하여 이벤트를 수신합니다.

영웅정보를 제공하고 사용사 행위에 반응하는 HeroDetailComponent를 보시기 바랍니다. HeroDetailComponent에는 삭제 버튼이 있지만 영웅 자체를 삭제하는 방법을 알지 못합니다. 할 수 있는 최선은 사용자의 삭제요청을 보고하는 이벤트를 발생하는 것 입니다.

아래는 HeroDetailComponent로부터 일부 발췌한 내용입니다.

src/app/hero-detail.component.ts (template)

template: ` <div>   <img src="{{heroImageUrl}}">   <span [style.text-decoration]="lineThrough">     {{prefix}} {{hero?.name}}   </span>   <button (click)="delete()">Delete</button> </div>`

 

src/app/hero-detail.component.ts (deleteRequest)

// This component make a request but it can't actually delete a hero. deleteRequest = new EventEmitter<Hero>();   delete() {   this.deleteRequest.emit(this.hero); }

이 컴포넌트는 EventEmitter를 리턴하는 deleteRequest 속성을 정의합니다. 사용자가 delete를 클릭하면 컴포넌트는 delete() 메서드를 호출하여 EventEmitter에 Hero 객체를 내보내도록 지시합니다.

이제 HeroDetailComponent의 deleteRequest 이벤트에 바인딩하는 주된 상위 컴포넌트를 상상해보십시오.

src/app/app.component.html (event-binding-to-component)

<hero-detail (deleteRequest)="deleteHero($event)" [hero]="currentHero"></hero-detail>

deleteRequest 이벤트가 발생하면 Angular는 부모 컴포넌트의 deleteHero메서드를 호출하고 HeroDetail에서 발생 된 삭제할 hero를 $event 변수에 전달합니다.

 

템플릿 문에는 부작용이 있습니다.

deleteHero 메서드는 부작용이 있습니다. 즉, 영웅을 삭제합니다. 템플릿 문의 부작용은 정상적인 것이 아니지만, 그럴수 있다고 예상됩니다.

영웅을 삭제하면 모델을 업데이트하고, 쿼리를 비롯한 다른 변경 사항을 유발하고, 원격 서버에 저장합니다. 이러한 변화는 시스템을 통해 퍼지고 결국 궁극적으로 이 뷰 및 다른 뷰에 표시됩니다.