Angular 2
템플릿
수색…
소개
템플릿은 앵귤러 1의 템플릿과 매우 유사하지만 작은 구문 변경으로 인해 발생하는 상황을 명확하게 알 수 있습니다.
각도 2 템플릿
간단한 템플레이트
우리의 이름과 가장 좋아하는 것을 보여주는 아주 간단한 템플릿으로 시작해 보겠습니다.
<div>
Hello my name is {{name}} and I like {{thing}} quite a lot.
</div>
{}: 렌더링
값을 렌더링하려면 표준 이중 컬 구문을 사용할 수 있습니다.
My name is {{name}}
이전에 "필터"라고 알려진 파이프는 문자열을 지역화하거나 부동 소수점 값을 통화 표현으로 변환하는 것과 같이 값을 새로운 값으로 변환합니다.
[]: 바인딩 속성
변수를 분석하고 구성 요소에 바인딩하려면 [] 구문을 사용하십시오. 우리 구성 요소에 this.currentVolume이 있으면이 구성 요소로 this를 전달하고 값은 동기화 상태를 유지합니다.
<video-control [volume]="currentVolume"></video-control>
(): HANDLING EVENTS
(): HANDLING EVENTS 컴포넌트에서 이벤트를 수신하기 위해 () 구문을 사용합니다
<my-component (click)="onClick($event)"></my-component>
[()]: 두 가지 방식으로 데이터 바인딩하기
지정된 사용자 입력 및 기타 이벤트에 대한 바인딩을 최신 상태로 유지하려면 [()] 구문을 사용하십시오. 이벤트를 처리하고 속성을 바인딩하는 것으로 생각하면됩니다.
<input [(ngModel)] = "myName"> 구성 요소의 this.myName 값은 입력 값과 동기화 상태를 유지합니다.
* : ASTERISK
이 지시문이이 구성 요소를 템플릿으로 처리하고 현재 구성 요소를 그대로 그리지 않음을 나타냅니다. 예를 들어, ngFor는 항목을 가져 와서 항목의 각 항목에 대해 스탬프 처리하지만 템플리트이므로 이니셜을 렌더링하지 않습니다.
<my-component *ngFor="#item of items">
</my-component>
렌더링 된 구성 요소가 아닌 템플릿에서 작동하는 다른 유사한 지시문은 * ngIf 및 * ngSwitch입니다.
