02 템플릿 구분 02

템플릿 명령문

템플릿 명령문은 엘리먼트, 컴포넌트 또는 디렉티브와 같은 바인딩 대상에서 발생하는 이벤트에 응답합니다. = 기호의 오른쪽에 따옴표로 묶여있는 (event) = "statement"와 같이 이벤트 바인딩 섹션에 템플릿 명령문이 표시됩니다.

src/app/app.component.html

<button (click)="deleteHero()">Delete hero</button>

템플릿 명령문은 또다른 측면을 가지고 있습니다. 그것은 사용자 동작에서 응용프로그램 상태를 업데이트하는 방법입니다.

이벤트에 응답하는 것은 Angular의 "단방향 데이터 흐름"의 또 다른 측면입니다. 이번 이벤트 루프가 진행되는 동안 어디에서든지 자유롭게 변경할 수 있습니다.

템플릿 표현식과 마찬가지로 템플릿 명령문은 자바 스크립트처럼 보이는 언어를 사용합니다. 템플릿 명령문 구문 분석기는 템플리트 표현식 구문 분석기와 다르고 특별히 기본 지정 (=)과 연쇄 표현식 (;또는,)을 모두 지원합니다.

그러나 특정 JavaScript 구문은 허용되지 않습니다.

l  new

l  증가 및 감소 연산자, ++ 및 --

l  + = 및 - =과 같은 연산자 할당

l  비트 연산자 | 및 &

l  템플릿 표현 연산자

 

명령문 컨텍스트

표현식과 마찬가지로 명령문은 컴포넌트 인스턴스의 이벤트 처리 메소드와 같은 명령문 컨텍스트의 내용 만 참조 할 수 있습니다.

명령문 컨텍스트는 일반적으로 컴포넌트 인스턴스입니다. (click) = "deleteHero ()"내에 deleteHero는 데이터 바인딩 된 컴포넌트의 메서드입니다.

src/app/app.component.html

<button (click)="deleteHero()">Delete hero</button>

명령문 컨텍스트는 템플리트 자체의 컨텍스트의 특성을 참조 할 수도 있습니다. 다음 예제에서 템플릿 $event 객체, 템플릿 입력 변수(let hero) 및 템플릿 참조 변수(#heroForm)는 컴포넌트의 이벤트 처리 메소드에 전달됩니다.

src/app/app.component.html

<button (click)="onSave($event)">Save</button> <button *ngFor="let hero of heroes" (click)="deleteHero(hero)">{{hero.name}}</button> <form #heroForm (ngSubmit)="onSubmit(heroForm)"> ... </form>

템플릿 컨텍스트 이름은 컴포넌트 컨텍스트 이름보다 우선합니다. 위의 deleteHero(hero)에서 hero는 템플릿의 입력 변수이며 컴포넌트의 hero 속성은 아닙니다.

템플릿 명령문은 전역 이름 공간의 어떤 것도 참조 할 수 없습니다. 창이나 문서도 참조 할 수 없습니다. console.log 또는 Math.max도 호출 할 수 없습니다.

 

명령문 지침

표현식과 마찬가지로 복잡한 템플릿 명령문을 작성하지 마십시오. 메소드 호출 또는 간단한 특성 할당이 표준이어야합니다.

이제 템플릿 표현식 및 명령문에 대한 이해가 되었다면 보간법 이상의 다양한 데이터 바인딩 구문에 대해 배울 준비가 되었습니다.