示例中的文件app.component.ts：
https://angular.io/resources/live-examples/toh-1/ts/plnkr.html如下：
@H_301_11@import { Component } from '@angular/core';
export class Hero {
id: number;
name: string;
}
@Component({
selector: 'my-app',template:`
<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name">
</div>
`
})
export class AppComponent {
title = 'Tour of Heroes';
hero: Hero = {
id: 1,name: 'Windstorm'
};
}
现在,我们在AppComponent中设置title的值,它显示在@Component的模板中.那么,想知道它是如何可能的？
解决方法
@Component()是一个装饰器,直接应用于装饰器之后的类,成员或变量.因此,因为@Component()装饰器紧跟在AppComponent()类之前,所以它被应用于此类.
模板中的表达式：’…’在它们应用的类的范围内进行评估.因此,title指的是AppComponent中的title字段
