Angular2 : 구성 요소 내부의 속성에서 속성 바인딩

Question

데이터 바인딩의 두 가지 방법의 차이점에 대해 혼란 스럽습니다. <input type="text" value="{{stringInterpolation}}">

나는 또 다른 방법으로 재산을 결합 할 수 읽었습니다 : I는 입력의 값 속성에 대한 속성이 있음을 결합 내 HTML에서 stringInterpolation = This is string interpolation;

: 내 구성 요소에서

나는 속성이 : <input type="text" [value]="stringInterpolation"> 텍스트 상자 내에서 동일한 값을 출력합니다. 여기

는 두 입력의 개발 도구에서 검사입니다 :

<input _ngcontent-qdj-2="" type="text" ng-reflect-value="This is string interpolation">

및

<input _ngcontent-qdj-2="" type="text" ng-reflect-value="This is string interpolation">

그들은 모두 동일합니다.

내 질문은 : value="{{stringInterpolation}}은 (는) [value]="stringInterpolation"과 어떻게 다른가요?

Answer 1

그들은 {{}} 보간을 평가하고 DOM의 value 건물 내부에 그 값을 추가합니다

value={{stringInterpolation}} 

위 속성 값

평가의 대안 방법입니다.

여기서, [value]="stringInterpolation" 구문 설탕 & 첫 번째 작은 verbose.

각도 2에서는 속성 바인딩이라고합니다. 일반적으로 컴포넌트 간 통신 목적으로 사용되는 경향이 있습니다. 때로는 동적 속성을 DOM 속성으로 설정하기도합니다.

속성 바인딩 의미는 현재 구성 요소 컨텍스트 (this)에 대해 평가됩니다 재산 binding에 지정된 어떤 값 [] &와 이름 랩 때문이다.

페이지에서 구성 요소 HTML을 플롯하는 동안 각도는 각 DOM 노드의 동적 클래스를 _ngcontent-[someunique]-[somenumber]=""에 추가하고 구성 요소에 대해 CSS를 추가 한 경우 동일한 내용이 CSS 규칙에 적용되었습니다. 이 추가 속성은 두 요소 (CSS & 및 노드)에 모두 추가되어 구성 요소 CSS가 현재로드 된 구성 요소 (구성 요소 메타 데이터에서 설정 한 내용에 따라 다름)에 영향을 주어야합니다.