03-02 컴포넌트

컴포넌트

컴포넌트는 화면의 일부분인 뷰를 제어합니다.

예를 들어, 다음뷰는 컴포넌트에 의해 제어됩니다.

l  탐색링크가 있는 앱루트

l  영웅의 목록.

l  영웅 편집기.

당신은 클래스 내에서 컴포넌트의 응용프로그램 로직(뷰를 지원하기 위해 수행하는 작업)을 정의합니다. 클래스는 프로퍼티 및 메서드의 API를 통해 뷰와 상호작용합니다.

예를 들어, HeroListComponent에는 서비스에서 얻은 영웅의 배열을 반환하는 heroes 프로퍼티가 있습니다. HeroListComponent에는 사용자가 해당 목록에서 영웅을 선택하기 위해 클릭할 때 selectedHero 프로퍼티를 설정하는 selectHero() 메서드도 있습니다.

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

export class HeroListComponent implements OnInit {   heroes: Hero[];   selectedHero: Hero;     constructor(private service: HeroService) { }     ngOnInit() {     this.heroes = this.service.getHeroes();   }     selectHero(hero: Hero) { this.selectedHero = hero; } }

 

 

Angular는 사용자가 응용프로그램을 사용할 때 컴포넌트를 작성, 업데이트 및 삭제합니다. 앱은 위에 명시된 ngOnInit()과 같은 선택적 라이프사이클후크를 통해 이 라이프사이클의 모든 순간에 조치를 취할 수 있습니다.