我們通過組件自帶的模板來定義視圖，模板以HTML形式存在，用來告訴Angular如何渲染組件（視圖）
多數(shù)情況下，模板看起來很像標(biāo)準的HTML.......當(dāng)然也有一點奇怪的地方，下面是HeroListComponent組件的一個模板。
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>
雖然這個模板使用的是典型的HTML元素，比如<h2>和<p>,但是它也能使用別的，比如ngFor、{{hero.name}}、（click）、[hero]和<hero-detail>

在模板的最后一行，<hero-detail>標(biāo)簽就是一個用來表示新組件HeroDetailComponent的自定義元素
HeroDetailComponent
跟以前見到過的 HeroListComponent
是 *不同 *的組件。HeroDetailComponent
( 未展示代碼 ) 用于展現(xiàn)一個特定英雄的情況，這個英雄是用戶從 HeroListComponent
列表中選擇的。 HeroDetailComponent
是 HeroListComponent
的 *子組件 *。

詳情請見組件與模板之間的關(guān)系。