Components - nkiateam/angular-tutorial GitHub Wiki

components

컴포넌트는 화면의 일부를 이루는 View를 제어합니다. 예를 들면, 예제에서 볼 수 있는 다음의 View들은 컴포넌트에 의해 제어됩니다.

• 네비게이션 링크를 가진 App root
• 영웅들의 목록(List of Heroes)
• 영웅 편집기(Hero Editor)

View를 제공하기 위해서 당신은 클래스 안에 컴포넌트의 어플리케이션 로직을 정의합니다. 이 클래스는 프로퍼티와 메소드의 API를 통하여 View와 상호 작용합니다.

예를 들면 다음의 HeroListComponent는 서비스로부터 얻어진 영웅들의 배열을 리턴하는 heroes 프로퍼티를 가집니다. 사용자가 목록으로부터 하나의 영웅을 선택하여 클릭했을 때, HeroListComponent는 selectedHero 프로퍼티를 세팅하는 selectHero()라는 메소드를 가지고 있습니다.

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()처럼 사용자의 어플리케이션은 선택적인 lifecycle hooks를 통하여 각 시점의 생명주기 안에서 행동을 취할 수 있습니다.