元數(shù)據(jù)告訴Angular如何處理一個(gè)類
回頭看看HeroListComponent就會明白：他只是一個(gè)類冯丙，一點(diǎn)框架的痕跡都沒有胃惜，里面完全沒有出現(xiàn)“Angular”的字樣。
實(shí)際上船殉，HeroListComponent真的只是一個(gè)類，直到告訴Angular這是一個(gè)組件挨厚。只要把 **元數(shù)據(jù) *附加到這個(gè)類列吼，就相當(dāng)于告訴 Angular ： HeroListComponent
是個(gè)組件。
在 TypeScript 中寞钥，我們用 裝飾器 (decorator) 來附加元數(shù)據(jù)陌选。 下面就是 HeroListComponent
的一些元數(shù)據(jù)蹄溉。
代碼如下：
@Component({
moduleId: module.id,
selector: 'hero-list',
templateUrl: 'hero-list.component.html',
providers: [ HeroService ]
})
export class HeroListComponent implements OnInit {
/ . . . */
}
@Component裝飾器能接受一個(gè)配置對象您炉，Angular會基于這些信息創(chuàng)建和展示組件機(jī)視圖。
來看下@Component中的一些配置項(xiàng)：
modeuleId:為與模塊相關(guān)的URL(如templateUrl)提供基地址棉胀。
seletor:一個(gè)CSS選擇器冀膝，它告訴Angular在父級HTML中找一個(gè)<hero-list>標(biāo)簽，然后創(chuàng)建該組件窝剖，并插入此標(biāo)簽中，比如脊奋，如果應(yīng)用的HTML包含<hero-list>疙描，Angular就會把HeroListComponent的一個(gè)實(shí)例插入到這個(gè)標(biāo)簽中。
templateUrl:組件HTML模板的模塊相對地址
providers：一個(gè)數(shù)組久又，包含所依賴的服務(wù)所需要的依賴注入提供商待错。這是在告訴Angular：該組件的構(gòu)造函數(shù)需要一個(gè)HeroService服務(wù)，這樣組件就可以從服務(wù)中獲得用來顯示英雄列表的那些數(shù)據(jù)火俄。
@Component
里面的元數(shù)據(jù)會告訴 Angular 如何取得你為組件指定的元數(shù)據(jù)。
模板适瓦、元數(shù)據(jù)和組件共同描繪出這個(gè)視圖谱仪。
我們也會沿用類似的風(fēng)格，用其它元數(shù)據(jù)裝飾器來指導(dǎo) Angular 的行為疯攒。 比如 @Injectable、 @Input和 @Output
等是一些最常用的裝飾器枚尼。
這種架構(gòu)所決定的是：必須往代碼中添加元數(shù)據(jù)，以便 Angular 知道該做什么崎溃。
