02 템플릿 구문 04

프로퍼티 바인딩 ([property])

템플릿 프로퍼티 바인딩을 작성하여 뷰 엘리먼트의 프로퍼티를 설정합니다. 바인딩은 프로퍼티를 템플릿 표현식의 값으로 설정합니다.

가장 일반적인 프로퍼티 바인딩은 엘리먼트 프로퍼티를 컴포넌트 프로퍼티 값으로 설정합니다. 다음은 이미지 엘리먼트의 src 속성을 컴포넌트의 heroImageUrl 속성에 바인딩하는 예입니다.

src/app/app.component.html

<img [src]="heroImageUrl">

또 다른 예는 컴포넌트가가 변경되지 않았다고 알릴 때 버튼을 비활성화하는 것입니다.

src/app/app.component.html

<button [disabled]="isUnchanged">Cancel is disabled</button>

다음은 지시어의 프로퍼티를 설정하는 것입니다.

src/app/app.component.html

<div [ngClass]="classes">[ngClass] binding to the classes property</div>

또 다른 예는 맞춤 컴포넌트의 모델 프로퍼티를 설정하는 것입니다 (부모 컴포넌트와 하위 컴포넌트가 통신 할 수있는 좋은 방법).

src/app/app.component.html

<hero-detail [hero]="currentHero"></hero-detail>

 

일방 통행

사람들은 종종 프로퍼티 바인딩을 단방향 데이터 바인딩으로 설명합니다. 이는 컴포넌트의 데이터 프로퍼티에서 대상 엘리먼트 프로퍼티로 단일 방향으로 값을 전달하기 때문입니다.

프로퍼티 바인딩을 사용하여 대상 엘리먼트에서 값을 가져올 수 없습니다. 대상 엘리먼트의 프로퍼티에 바인딩하여 읽을 수는 없습니다. 설정 만 할 수 있습니다.

마찬가지로 프로퍼티 바인딩을 사용하여 대상 엘리먼트에서 메서드를 호출 할 수 없습니다. 엘리먼트가 이벤트를 발생 시키면 이벤트 바인딩을 사용하여 이벤트를 처리할 수 있습니다. 대상 엘리먼트 프로퍼티를 읽거나 그 메소드 중 하나를 호출해야하는 경우 다른 기술이 필요합니다. ViewChild 및 ContentChild에 대한 API 를참조를 참조하십시오.

 

대상 바인딩

둘러싸는 대괄호 사이의 엘리먼트 프로퍼티는 대상 프로퍼티를 식별합니다. 다음 코드의 대상 프로퍼티는 이미지 엘리먼트의 src 프로퍼티입니다.

src/app/app.component.html

<img [src]="heroImageUrl">

어떤 사람들은 정식 형태로 알려진 bind- 접두사를 선호합니다.

src/app/app.component.html

<img bind-src="heroImageUrl">

대상 이름은 항상 다른 이름의 것으로 보이는 경우에도 프로퍼티의 이름입니다. src를 보고 어트뷰트의 이름이라고 생각할 수 있지만 이미지 엘리먼트 프로퍼티의 이름입니다.

엘리먼트 프로퍼티는 보다 일반적인 대상 일 수 있지만, Angular는 먼저 이름이 알려진 디렉티브의 프로퍼티인지 확인합니다.

src/app/app.component.html

<div [ngClass]="classes">[ngClass] binding to the classes property</div>

이름이 알려진 디렉티브 또는 엘리먼트의 프로퍼티와 일치하지 않으면 Angular는 "알 수 없는 디렉티브"오류를 보고합니다.

 

부작용 회피

앞에서 언급했듯이 템플릿 표현식을 평가할 경우 눈에 보이는 부작용이 없어야합니다. 표현 언어 자체가 안전하게 지켜주는 역할을 합니다. 프로퍼티 바인딩 표현식에 있는 값에 값을 할당하거나 증가 및 감소 연산자를 사용할 수 없습니다.

물론 표현식은 부작용이 있는 프로퍼티나 메서드를 호출 할 수 있습니다. Angular는 그 사실을 알거나 그만 둘 수 없습니다.

표현식은 getFoo()와 같은 것을 호출 할 수 있습니다. getFoo()가하는 일만 알면됩니다. getFoo()가 무언가를 변경하고 그 무언가에 바인딩되어 있으면 불쾌한 경험을 할 위험이 있습니다. Angular는 변경된 값을 표시하거나 표시하지 않을 수 있습니다. Angular가 변경을 감지하고 경고 오류가 발생할 수 있습니다. 일반적으로 데이터 프로퍼티를 사용하거나, 값만 리턴하고 수행은 하지 않는 메서드를 사용하십시오.

 

적절한 유형 리턴

템플리트 표현식은 대상 등록 정보에 의해 예상되는 값 유형으로 평가되어야 합니다. 대상 프로퍼티에 문자열이 필요한 경우 문자열을 리턴합니다. 대상 프로퍼티에 숫자가 필요한 경우 숫자를 리턴합니다. 대상 프로퍼티에 객체가 필요한 경우 객체를 리턴합니다.

HeroDetail 컴포넌트의 hero 프로퍼티는 Hero 개체를 기대하며 이는 정확하게 프로퍼티 바인딩에서 보내는 내용입니다.

src/app/app.component.html

<hero-detail [hero]="currentHero"></hero-detail>

 

대괄호

대괄호는 템플릿 표현식을 평가하기 위해 Angular에 알립니다. 대괄호를 생략하면 Angular는 문자열을 상수로 처리하고 해당 문자열로 대상 프로퍼티를 초기화합니다. 문자열을 평가하지 않습니다!

다음과 같은 실수를 저지르지 마십시오.

src/app/app.component.html

<!-- ERROR: HeroDetailComponent.hero expects a      Hero object, not the string "currentHero" -->   <hero-detail hero="currentHero"></hero-detail>

 

일회성 문자열 초기화

다음 중 하나라도 해당되면 대괄호를 생략해야 합니다.

l  target 프로퍼티는 문자열 값을 허용합니다.

l  문자열은 템플릿에 구울 수있는 고정 값입니다.

l  이 초기 값은 절대로 변하지 않습니다.

표준 HTML에서 이러한 방식으로 어트리뷰트를 일상적으로 초기화하며, 디렉티브 및 컴포넌트 등록 정보 초기화와 마찬가지로 작동합니다. 다음 예제에서는 HeroDetailComponent의 prefix 속성을 템플릿식이 아닌 고정 된 문자열로 초기화합니다. Angular는 그것을 설정하고 잊어 버립니다.

src/app/app.component.html

<hero-detail prefix="You are my" [hero]="currentHero"></hero-detail>

한편, [hero] 바인딩은 컴포넌트의 currentHero 프로퍼티에 대한 라이브 바인딩으로 남아 있습니다.