angular2 - 참조 <input> 값을 변경하는 구성 요소의 템플릿 참조 변수

Question

구성 요소의 값 속성에 Angular2로 액세스하려면 어떻게합니까? 구성 요소 코드에서

<input #myInput (keyup.enter)="onInput(myInput)"/> 

: 템플릿에서

import {ElementRef} from '@angular/core'; 
... 
onInput(latLngInputElement: ElementRef) { 
    // I want to access the value property of the <input> element here, and 
    // modify it so that it is reflected back in the template. 

내가 코드에 myInput.value를 전달할 수 있다는 것을 알고,하지만 난 참조가 필요 그래서이 함수를 사용하여 요소의 .value 속성을 업데이트 할 수도 있습니다.

전역 변수에 대한 양방향 바인딩을 포함하지 않는 방법이 있는지 알고 싶습니다. 가능하면 전역 변수가 거의없는 것이 좋다고 생각하기 때문입니다. 감사!

Answer 1

Angular의 솔루션은 입력 모델을 구성 요소의 변수에 양방향으로 바인딩하는 것입니다. Typescript의 문서에 따라 let을 사용하여 var를 선언하는 경우 전역 범위를 더럽 힙니다.

전역 변수에 대한 양방향 바인딩을 포함하지 않는 방법이 있는지 알고 싶습니다. 전역 변수를 가능한 한 적게 가지고 있다고 생각하기 때문에 알고 싶습니다. 감사!

나는 이것을 이해하지만 ElementRef을 호출하는 것이 여기에있는 두 가지 악의 경우 더 나쁠 수 있습니다. 각도 문서는 Angular가 이미 DOM API를 처리하기 위해 많은 노력을 기울이고 있기 때문에이를 사용하지 않는 것이 좋습니다.

그러나 이 일 때 latLngInputElement.value에서 값을 가져올 수 있어야합니다.

당신은 깨끗한 솔루션을 찾고있는 경우 :

나는 매우 체크 아웃하는 것이 좋습니다 각도의 FormBuilder 하나의 템플릿 기반 대조적으로 모델 중심 양식을 구축 할 수 있습니다. 템플릿 대신 프로그램 적으로 페이지의 양식 값을 제어하는 ​​매우 우아한 방법입니다. Scotch.io에는 excellent blog post이 있습니다. 그것은 학습할만한 가치가 있습니다.

행운을 빈다.