四：Angular 元數據 (Metadata)

元數據告訴 Angular 如何處理一個類。

@Component({
   selector:    'hero-list',
   templateUrl: './hero-list.component.html',
   providers:  [ HeroService ]
})
export class HeroListComponent implements OnInit {
　　/* . . . */
}

@Component裝飾器能接受一個配置對象， Angular 會基於這些信息創建和展示組件及其視圖。

@Component的配置項包括：

selector： CSS 選擇器，它告訴 Angular 在父級 HTML 中查找 hero-list 標簽，創建並插入該組件。

　　　　 例如，如果應用的 HTML 包含hero-list， Angular 就會把HeroListComponent的一個實例插入到這個標簽中。 
templateUrl：組件 HTML 模板的模塊相對地址，如前所示。 
providers - 組件所需服務的依賴注入提供商數組。 這是在告訴 Angular：該組件的構造函數需要一個HeroService服務，這樣組件就可以從服務中獲得英雄數據。 
元數據 
@Component里面的元數據會告訴 Angular 從哪里獲取你為組件指定的主要的構建塊。

模板、元數據和組件共同描繪出這個視圖。

其它元數據裝飾器用類似的方式來指導 Angular 的行為。 例如@Injectable、@Input和@Output等是一些最常用的裝飾器。

這種架構處理方式是：你向代碼中添加元數據，以便 Angular 知道該怎么做。

angular 組件元數據一覽 

名稱	類型	作用
selector	string	自定義組件的標簽，用於匹配元素。
inputs	string[]	指定組件的輸入屬性。
outputs	string[]	指定組件的輸出屬性
host	{[key:string],string}	指定指令或組件的事件，動作和屬性等
providers	any[]	指定該組件及其所有子組件（含ContentChildren）可用的服務依賴注入
exportAs	string	給指令分配一個變量，使其可以在模板中使用
moduleId	string	包含該組件模塊的id，他被用於解析模板和樣式的相對路徑
queries	{[key:string],any}	設置需要被注入到組件的查詢
viewProviders	any[]	指定該組件及其所有子組件可用的服務
changeDetection	ChangeDetectionStrategy	指定使用的變化監測策略
templateUrl	string	模板路徑
styleUrls	string[]	樣式路徑
template	string	內聯模板
styles	string[]	內聯樣式
animations	AnimationEntryMetadata[]	angular動畫
encapsulation	ViewEncapsulation	設置組件的試圖包裝選項
interpolation	[string,string]	設置自定義插值標記，默認是{{}}