03-03 템플릿

템플릿

동반템플릿으로 컴포넌트 뷰를 정의합니다. 템플릿은 Angular에서 컴포넌트를 표현하는 방법을 알려주는 HTML 형식입니다.

템플릿은 몇 가지 차이점을 제외하고는 일반 HTML처럼 보입니다. 다음은 HeroListComponent의 템플릿입니다.

src/app/hero-list.component.html

<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>

이 템플릿은 <h2> 및 <p>와 같은 일반적인 HTML 엘리먼트를 사용하지만 일부 차이점도 있습니다. *ngFor와 같은 코드, {{hero.name}}, (click), [hero] 및 <hero-detail>은 Angular의 템플릿 구문을 사용합니다.

템플릿의 마지막 줄에서 <hero-detail> 태그는 새 컴포넌트 인 HeroDetailComponent를 나타내는 사용자 정의 엘리먼트입니다.

HeroDetailComponent는 검토중인 HeroListComponent와는 다른 컴포넌트입니다. HeroDetailComponent (코드는 표시되지 않음)는 HeroListComponent가 제공하는 목록에서 사용자가 선택한 영웅에 대한 내역을 보여줍니다. HeroDetailComponent는 HeroListComponent의 자식컴포넌트입니다.

 

 

<hero-detail>이 본래의 HTML 엘리먼트들 사이에서 얼마나 편하게 있는지 주목하십시오. 맞춤 컴포넌트는 동일한 레이아웃에서 네이티브 HTML과 자연스럽게 섞여 있습니다.