컴포넌트는 화면을 구성하는 뷰를 관리하는 주체다.
컴포넌트 메타데이터
컴포넌트는 @Component데코레이팅된 클래스다.
@Component({
selector: 'app-hero-list',
templateUrl: './hero-list.component.html',
providers: [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}데코레이터 메타데이터는 이 컴포넌트가 앵귤러의 구성요소로서 어떻게 생성되고 뷰를 정의하며 어떻게 동작할지를 프레임워크에 알려준다.
-
selector : 컴포넌트 인스턴스가 DOM트리의 어느 자리에 위치할지 CSS셀렉터로 지정한다.
HTML 템플릿에 < app-hero-list>< /app-hero-list>삽입하면 HeroListComponent 인스턴스가 생성되고 컴포넌트 템플릿으로 대체된다.
-
templateUrl : 컴포넌트의 HTML 템플릿을 외부파일에 정의한다. 인라인으로 구성하려면 template프로퍼티를 사용하면 된다. 템플릿은 컴포넌트의 호스트뷰를 정의한다.
-
providers : 의존성주입되는 서비스 인스턴스가 생성된다.
