Angular 2
템플릿

소개

각도 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입니다.