01 사용자입력 01

사용자 입력

링크 클릭, 버튼 누르기, 텍스트 입력 등의 사용자 동작은 DOM 이벤트를 발생시킵니다. 이 페이지에서는 Angular 이벤트 바인딩 구문을 사용하여 해당 이벤트를 컴포넌트 이벤트 핸들러에 바인딩하는 방법을 설명합니다.

라이브 예제/다운로드 예제를 실행하십시오.

 

사용자 입력 이벤트에 바인딩

Angular 이벤트 바인딩을 사용하여 모든 DOM 이벤트에 응답할 수 있습니다. 많은 DOM 이벤트는 사용자 입력에 의해 발생됩니다. 이러한 이벤트에 바인딩하면 사용자로부터 입력을 받을 수 있습니다.

DOM 이벤트에 바인딩하려면 DOM 이벤트 이름을 괄호로 묶고 따옴표로 둘러싼 템플릿 명령문을 할당합니다.

다음 예제는 클릭 핸들러를 구현하는 이벤트 바인딩입니다.

src/app/click-me.component.ts

<button (click)="onClickMe()">Click me!</button>

등호 왼쪽의 (click)은 바인딩을 대상으로 버튼의 클릭이벤트를 식별합니다. 등호 오른쪽의 따옴표로 묶인 텍스트는 컴포넌트의 onClickMe메서드를 호출하여 click 이벤트에 응답하는 템플릿 명령문입니다.

바인딩을 작성할 때 템플릿 명령문의 실행 컨텍스트를 알고 있어야 합니다. 템플릿 명령문의 식별자는 특정 컨텍스트객체에 속하며 일반적으로 템플릿을 제어하는 ​​Angular 컴포넌트입니다. 위의 예는 한 줄의 HTML을 보여 주지만 HTML은 더 큰 컴포넌트에 속합니다.

src/app/click-me.component.ts

@Component({   selector: 'click-me',   template: `     <button (click)="onClickMe()">Click me!</button>     {{clickMessage}}` }) export class ClickMeComponent {   clickMessage = '';     onClickMe() {     this.clickMessage = 'You are my hero!';   } }

사용자가 버튼을 클릭하면 Angular는 ClickMeComponent에서 onClickMe 메서드를 호출합니다.

 

$event 객체로부터 사용자 입력 받기

DOM 이벤트는 컴포넌트에 유용할만한 많은 양의 정보를 전달합니다. 이 섹션에서는 각 입력 후 사용자 입력을 얻기위해 입력박스의 keyup 이벤트에 바인딩하는 방법을 보여줍니다.

다음 코드는 keyup 이벤트를 수신하고 전체 이벤트페이로드($event)를 컴포넌트 이벤트핸들러에 전달합니다.

src/app/keyup.components.ts (template v.1)

template: `   <input (keyup)="onKey($event)">   <p>{{values}}</p> `

사용자가 키를 눌렀다 놓으면 keyup 이벤트가 발생하고 Angular는 이 코드가 컴포넌트의 onKey() 메서드에 매개변수로 전달하는 $event 변수에 해당 DOM 이벤트객체를 제공합니다.

src/app/keyup.components.ts (class v.1)

export class KeyUpComponent_v1 {   values = '';     onKey(event: any) { // without type info     this.values += event.target.value + ' | ';   } }

$event 객체의 속성은 DOM 이벤트 유형에 따라 다릅니다. 예를 들어 마우스 클릭이벤트는 입력박스 편집이벤트에서와 다른 정보를 포함합니다.

모든 표준 DOM 이벤트 객체에는 대상 프로퍼티, 즉 이벤트를 발생시킨 엘리먼트에 대한 참조가 있습니다. 이 경우 target은 <input> 엘리먼트를 참조하고 event.target.value는 해당 엘리먼트의 현재 내용을 리턴합니다.

각 호출 후에 onKey() 메서드는 입력박스값의 내용을 컴포넌트의 values 프로퍼티에 있는 내용에 추가하고 그 뒤에 구분문자 (|)를 추가합니다. 보간은 values ​​프로퍼티에서 누적되는 입력박스 변경 사항을 표시합니다.

사용자가 문자 "abc"를 입력한 다음 백스페이스를 하나씩 제거한다고 가정합니다. 결과 UI에 다음과 같이 표시됩니다.

a | ab | abc | ab | a | |

 

$event 유형

위의 예는 $event를 any유형으로 형변환합니다. 이는 비용을 들여 코드를 단순화합니다. 이벤트 객체의 프로퍼티를 공개하고 어리석은 실수를 방지할 수 있는 유형 정보는 없습니다.

다음 예제에서는 메서드를 형식으로 다시 작성합니다.

src/app/keyup.components.ts (class v.1 - typed )

export class KeyUpComponent_v1 {   values = '';     onKey(event: KeyboardEvent) { // with type info     this.values += (<HTMLInputElement>event.target).value + ' | ';   } }

$event는 이제 특정 KeyboardEvent입니다. 모든 엘리먼트가 value 프로퍼티을 가지고 있는 것은 아니므로 target을 입력 엘리먼트에 형변환합니다. OnKey 메서드는 템플릿에서 예상되는 내용과 이벤트를 해석하는 방법을보다 명확하게 표현하였습니다.

 

$event 전달은 모호한 관행입니다.

이벤트 객체의 형변환 목적은 전체 DOM 이벤트를 메소드에 전달하기 위해서입니다. 컴포넌트는 템플릿 세부정보를 너무많이 인식합니다. HTML 구현에 관한 것보다 더이상의 정보를 알지 못하고 정보를 추출할 수는 없습니다. 이것은 템플릿(사용자가 보는 것)과 컴포넌트(응용프로그램이 사용자 데이터를 처리하는 방법) 사이의 관심의 분리를 깨트리게 됩니다.

다음 섹션에서는 템플릿 참조변수를 사용하여 이 문제를 해결하는 방법을 보여줍니다.