Templates - nkiateam/angular-tutorial GitHub Wiki

우리는 tempate이라는 곳에 component의 뷰를 정의한다. template은 Angular에게 어떻게 컴포넌트를 랜더링할지를 알려주는 HTML형식입니다.

template은 몇몇의 차이점을 제외하고는 HTML처럼 보인다. 다음은 HeroListComponent의 템플릿이다.

<h2>Hero List</h2>
<p><i>Pick a hero from the list</i></p>
<ul>
  <li *ngFor="let hero of heroes" (click)="selectHero(hero)">
    {{hero.name}}
  </li>
</ul>
<hero-detail *ngIf="selectedHero" [hero]="selectedHero"></hero-detail>

비록 template은 전통적인 HTML 요소를 사용하고 있지만 또한 몇가지 차이점도 가지고 있다. *ngFor, {{hero.name}}, (click), [hero] 그리고 과 같은 Angular의 템플릿 문법이 그것이다.

마지막 라인에 태그는 HeroDetailComponent의 custom 엘리먼트를 의미한다.

HeroDetailComponent는 HeroListComponent와는 다른 컴포넌트이다. HeroDetailComponent (코드는 표시되지 않음)는 HeroListComponent에 의해 제시된 목록에서 사용자가 선택한 영웅에 대한 사실을 보여준다. HeroDetailComponent는 HeroListComponent의 자식이다.

이 네이티브 HTML 요소들 사이에서 어떻게 있는지 주목해라. 사용자 component는 동일한 레이아웃의 기본 HTML과 완벽하게 조화되어 있다.

⚠️ **GitHub.com Fallback** ⚠️