앵귤라의 기본 구성 요소라합니다.
내용은 뷰와 클래스로 구성됬다네요.
뷰에서 호출된 화면 경로를 제어한다.
각각의 Hook을 implements 하여 Hook 별 처리 내용을 정의 할수 있다.
export class SpyDirective implements OnInit, OnDestroy {
ngOnInit() { this.logIt(`onInit`); } ngOnDestroy() { this.logIt(`onDestroy`); }
}
import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HeroService } from '../hero.service';
@Component({
selector: 'app-heroes',
templateUrl: './heroes.component.html',
styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
heroes: Hero[];
constructor(private heroService: HeroService) { }
ngOnInit() {
this.getHeroes();
}
getHeroes(): void {
this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes);
}
}
Component metadata
@Component 데코레이터 어노테이션을 붙혀서 선언한다.
selector : CSS 셀렉터 처럼 사용 하면 되고 HTML 에 포함된 요소를 해당 컴포넌트로 랜더링 한다.
templateUrl : 컴포넌트의 주요 뷰를 HTML 템플릿된 파일의 상대경로를 정의한다.
template : 컴포넌트의 주요 HTML 뷰 코드를 작성한다. 역따옴표를 사용하여 안의 따옵표 코드를 같이 사용 할수 있다.
providers : 사용할 컴포넌트의 의존성 주입하는 프로바이저이다. 배열형태로 정의한다. 컴포넌트의 생성자에서 받아서 인스턴스를 생성한다.
styleUrls : 여기에 정의한 CSS 파일은 해당 컴포넌트에서에 스타일이 적용된다.
style : 해당 컴포넌트에 적용될 스타일 코드를 작성한다.