01 사용자 입력 02

템플릿 참조변수에서 사용자 입력 받기

사용자 데이터를 가져오는 또 다른 방법은 Angular 템플릿 참조변수를 사용하는 것입니다. 이러한 변수는 템플릿내에서 엘리먼트에 직접 액세스할 수 있게 해줍니다. 템플릿 참조변수를 선언하려면 식별자 앞에 해시문자(#)를 붙이십시오.

다음 예제에서는 템플릿 참조변수를 사용하여 간단한 템플릿에서 키입력 루프백을 구현합니다.

src/app/loop-back.component.ts

@Component({   selector: 'loop-back',   template: `     <input #box (keyup)="0">     <p>{{box.value}}</p>   ` }) export class LoopbackComponent { }

<input> 요소에 선언된 box라는 템플릿 참조변수는 <input> 엘리먼트 자체를 참조합니다. 이 코드는 box 변수를 사용하여 입력 엘리먼트의 값을 가져와서 <p> 태그 사이에 보간을 이용하여 표시합니다.

템플릿은 완전히 자체 포함되어 있습니다. 그것은 컴포넌트에 바인딩되지 않으며 컴포넌트는 아무 것도하지 않습니다.

입력박스에 내용을 입력하고, 각 키입력이 화면에 표시되는 것을 확인할 수 있습니다.

템플릿 참조변수를 사용하여 입력박스의 $event 객체를 이용하는 것보다 쉽게 ​​얻을 수 있는 방법이 있습니다. 다음은 템플릿 참조변수를 사용하여 사용자의 입력을 받는 이전 키업예제를 다시 작성한 것입니다.

src/app/keyup.components.ts (v2)

@Component({   selector: 'key-up2',   template: `     <input #box (keyup)="onKey(box.value)">     <p>{{values}}</p>   ` }) export class KeyUpComponent_v2 {   values = '';   onKey(value: string) {     this.values += value + ' | ';   } }

이 접근법의 좋은 점은 컴포넌트가 뷰에서 깨끗한 데이터 값을 얻는다는 점입니다. 더이상 $event 및 구조에 대한 지식이 필요하지 않습니다.

 

키 이벤트 필터링 (key.enter 이용)

(keyup)이벤트 핸들러는 모든 키입력을 청취합니다. 사용자가 입력을 완료했음을 알리기 때문에 Enter 키가 중요한 경우가 있습니다. 잡음을 줄이는 한 가지 방법은 모든 $event.keyCode를 검사하고 키가 Enter일 때만 조치를 취하는 것입니다.

더 쉬운 방법이 있습니다: Angular의 keyup.enter 가상 이벤트에 바인딩하십시오. 그러면 Angular는 사용자가 Enter 키를 누를 때만 이벤트 핸들러를 호출합니다.

src/app/keyup.components.ts (v3)

@Component({   selector: 'key-up3',   template: `     <input #box (keyup.enter)="onEnter(box.value)">     <p>{{value}}</p>   ` }) export class KeyUpComponent_v3 {   value = '';   onEnter(value: string) { this.value = value; } }

다음은 결과화면 입니다.

 

On blur

앞의 예에서 사용자가 마우스를 놓고 Enter 키를 누르지 않고 페이지의 다른 곳을 클릭하면 입력 박스의 현재 상태가 손실됩니다. 컴포넌트의 value 프로퍼티는 사용자가 Enter 키를 누를 때만 업데이트됩니다.

이 문제를 해결하려면 Enter 키와 blur 이벤트를 모두 청취하십시오.

src/app/keyup.components.ts (v4)

@Component({   selector: 'key-up4',   template: `     <input #box       (keyup.enter)="update(box.value)"       (blur)="update(box.value)">       <p>{{value}}</p>   ` }) export class KeyUpComponent_v4 {   value = '';   update(value: string) { this.value = value; } }