02 템플릿 구문 05

프로퍼티 바인딩 아니면 보간?

보간과 프로퍼티 바인딩 사이에서 선택해야 하는 경우가 많습니다. 다음 바인딩 쌍은 동일한 작업을 수행합니다.

src/app/app.component.html

<p><img src="{{heroImageUrl}}"> is the <i>interpolated</i> image.</p> <p><img [src]="heroImageUrl"> is the <i>property bound</i> image.</p>   <p><span>"{{title}}" is the <i>interpolated</i> title.</span></p> <p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>

보간은 많은 경우에 프로퍼티 바인딩에 대한 편리한 대안입니다.

데이터 값을 문자열로 표현할 때 하나의 형식을 다른 형식보다 선호하는 기술적 인 이유는 없습니다. 보간법을 선호하는 경우에는 가독성을 높일 수 있습니다. 코딩 스타일 규칙을 수립하고 규칙을 준수하고 현재 작업에 가장 자연스러운 느낌을 주는 양식을 선택하는 것이 좋습니다.

엘리먼트 프로퍼티를 문자열이 아닌 데이터 값으로 설정하는 경우 프로퍼티 바인딩을 사용해야합니다.

 

콘텐츠 보안

다음과 같은 악성 콘텐츠를 상상해보십시오.

src/app/app.component.ts

evilTitle = 'Template <script>alert("evil never sleeps")</script>Syntax';

다행히도 Angular 데이터 바인딩은 위험한 HTML에 대해 경고합니다. 값을 표시하기 전에 값을 삭제합니다. 스크립트 태그가있는 HTML이 보간이나 프로퍼티 바인딩을 사용하지 않고 브라우저로 누출되는 것을 허용하지 않습니다.

src/app/app.component.html

<!--   Angular generates warnings for these two lines as it sanitizes them   WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).  --> <p><span>"{{evilTitle}}" is the <i>interpolated</i> evil title.</span></p> <p>"<span [innerHTML]="evilTitle"></span>" is the <i>property bound</i> evil title.</p>

보간은 프로퍼티 바인딩과 스크립트 태그를 다르게 처리하지만 두 방법 모두 내용을 무해하게 렌더링합니다.