我们通过组件自带的模板来定义视图，模板以HTML形式存在，用来告诉Angular如何渲染组件（视图）
多数情况下，模板看起来很像标准的HTML.......当然也有一点奇怪的地方，下面是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>标签就是一个用来表示新组件HeroDetailComponent的自定义元素
HeroDetailComponent
跟以前见到过的 HeroListComponent
是 *不同 *的组件。HeroDetailComponent
( 未展示代码 ) 用于展现一个特定英雄的情况，这个英雄是用户从 HeroListComponent
列表中选择的。 HeroDetailComponent
是 HeroListComponent
的 *子组件 *。
详情请见组件与模板之间的关系。
