03-04 메타데이타

메타데이타

메타데이타는 클래스를 처리하는 방법을 앵귤러에게 알려줍니다.

HeroListComponent의 코드를 살펴보면, 클래스임을 알 수 있습니다. 프레임워크에 대한 어떠한 증거도 없으며 "Angular"는 전혀 없습니다.

사실 HeroListComponent는 실제로 클래스일 뿐입니다. 당신이 Angular에 컴포넌트라고 알릴 때까지는 컴포넌트가 아닙니다.

HeroListComponent가 컴포넌트라는 것을 Angular에게 알려주려면 메타데이터를 클래스에 첨부하십시오.

TypeScript에서는 데코레이터를 사용하여 메타데이터를 첨부합니다. HeroListComponent의 메타데이터는 다음과 같습니다.

src/app/hero-list.component.ts (metadata)

@Component({   selector:    'hero-list',   templateUrl: './hero-list.component.html',   providers:  [ HeroService ] }) export class HeroListComponent implements OnInit { /* . . . */ }

@Component 데코레이터는 바로 아래에 있는 클래스를 컴포넌트 클래스로 식별합니다.

@Component 데코레이터는 컴포넌트와 뷰를 생성하고 표시하는데 필요한 정보가 있는 필수 설정 객체를 가집니다.

다음은 가장 유용한 @Component 설정옵션 중 일부입니다.

l  selector : 부모 HTML에 <hero-list> 태그가 있는 이 컴포넌트의 인스턴스를 만들고 삽입하도록 Angular에 지시하는 CSS 셀렉터입니다. 예를 들어 앱의 HTML에 <hero-list> </hero-list>가 포함되어 있으면 Angular는 해당 태그 사이에 HeroListComponent뷰의 인스턴스를 삽입합니다.

l  templateUrl : 위에 표시된 컴포넌트의 HTML 템플릿 모듈의 기준 주소입니다.

l  providers : 컴포넌트에 필요한 서비스에 대한 종속성주입 공급자 배열입니다. Angular에게 컴포넌트의 생성자가 HeroService를 필요로 하므로 표시할 영웅 목록을 가져올 수 있다고 알려주는 한가지 방법입니다.

@Component의 메타데이터는 Angular에게 컴포넌트에 대해 지정한 주요 빌딩블록을 가져올 위치를 알려줍니다.

템플릿, 메타데이터 및 컴포넌트가 함께 뷰를 표현합니다.

다른 메타데이터 데코레이터를 유사한 방식으로 적용하여 Angular 동작을 안내합니다. @Injectable, @Input 및 @Output은 인기있는 데코레이터중 일부입니다.