什么是裝飾器？
裝飾器是一個(gè)函數(shù)，它將元數(shù)據(jù)添加到類、類成員（屬性、方法）和函數(shù)參數(shù)。
裝飾器是一個(gè) JavaScript 的語(yǔ)言特性，裝飾器在 TypeScript 里已經(jīng)實(shí)現(xiàn)，并被推薦到了ES2016（也就是ES7）。
要想應(yīng)用裝飾器，把它放到被裝飾對(duì)象的上面或左邊。
Angular 使用自己的一套裝飾器來(lái)實(shí)現(xiàn)應(yīng)用程序各部件之間的相互操作
@NgModule裝飾器
NModule是一個(gè)裝飾器函數(shù)，它接收一個(gè)用來(lái)描述模塊屬性的元數(shù)據(jù)對(duì)象。其中最重要的屬性是：
declarations
聲明本模塊中擁有的視圖類。 Angular 有三種視圖類：組件、指令和管道。
exports
declarations 的子集，可用于其它模塊的組件模板。
imports
本模塊聲明的組件模板需要的類所在的其它模塊。
providers
服務(wù)的創(chuàng)建者，并加入到全局服務(wù)列表中，可用于應(yīng)用任何部分。
bootstrap
指定應(yīng)用的主視圖（稱為根組件），它是所有其它視圖的宿主。只有根模塊才能設(shè)置bootstrap
屬性。
@Component組件裝飾器
它把緊隨其后的類標(biāo)記成了組件類@Component裝飾器能接受一個(gè)配置對(duì)象， Angular 會(huì)基于這些信息創(chuàng)建和展示組件及其視圖。@Component的配置項(xiàng)包括：
moduleId: 為與模塊相關(guān)的 URL（例如templateUrl）提供基地址。
selector： CSS 選擇器，它告訴 Angular 在父級(jí) HTML 中查找<hero-list>
標(biāo)簽，創(chuàng)建并插入該組件。 例如，如果應(yīng)用的 HTML 包含<hero-list></hero-list>， Angular 就會(huì)把HeroListComponent
的一個(gè)實(shí)例插入到這個(gè)標(biāo)簽中。
templateUrl：組件 HTML 模板的模塊相對(duì)地址，如前所示。
providers 組件所需服務(wù)的依賴注入提供商數(shù)組。 這是在告訴 Angular：該組件的構(gòu)造函數(shù)需要一個(gè)HeroService
服務(wù)，這樣組件就可以從服務(wù)中獲得英雄數(shù)據(jù)
@Component里面的元數(shù)據(jù)會(huì)告訴 Angular 從哪里獲取你為組件指定的主要的構(gòu)建塊。模板、元數(shù)據(jù)和組件共同描繪出這個(gè)視圖
@Component擴(kuò)展了@Directive, 以便@Directive中的配置項(xiàng)也能用在組件上moduleId: module.id如果設(shè)置了，templateUrl和styleUrl會(huì)被解析成相對(duì)于組件的。
viewProviders: [MyService, { provide: ... }]
依賴注入provider的數(shù)組，局限于當(dāng)前組件的視圖中。
template: 'Hello {{name}}'templateUrl: 'my-component.html'
當(dāng)前組件視圖的內(nèi)聯(lián)模板或外部模板地址
styles: ['.primary {color: red}']styleUrls: ['my-component.css']
內(nèi)聯(lián)CSS樣式或外部樣式表URL的列表，用于給組件的視圖添加樣式。
****@Injectable裝飾器
聲明當(dāng)前類有一些依賴，當(dāng)依賴注入器創(chuàng)建該類的實(shí)例時(shí)，這些依賴應(yīng)該被注入到構(gòu)造函數(shù)中。
** @Pipe({...})裝飾器** 聲明當(dāng)前類是一個(gè)管道，并且提供關(guān)于該管道的元數(shù)據(jù)
** @Directive裝飾器**
聲明當(dāng)前類是一個(gè)指令，并提供關(guān)于該指令的元數(shù)據(jù)
** @Input() @Output() @HostBinding @HostListener @ContentChild裝飾器**
@Input() myProperty;
聲明一個(gè)輸入屬性，以便我們可以通過(guò)屬性綁定更新它。(比如： <my-cmp [my-property]="someExpression">
).
@Output() myEvent = new EventEmitter();
聲明一個(gè)輸出屬性，以便我們可以通過(guò)事件綁定進(jìn)行訂閱。(比如：<my-cmp (my-event)="doSomething()">
).
@HostBinding('[class.valid]') isValid;
把宿主元素的屬性(比如CSS類：valid
)綁定到指令/組件的屬性(比如：isValid
)。
@HostListener('click', ['$event']) onClick(e) {...}
通過(guò)指令/組件的方法(例如onClick
)訂閱宿主元素的事件(例如click
)，可選傳入一個(gè)參數(shù)($event
)。
@ContentChild(myPredicate) myChildComponent;
把組件內(nèi)容查詢(myPredicate
)的第一個(gè)結(jié)果綁定到類的myChildComponent
屬性。
@ContentChildren(myPredicate) myChildComponents;
把組件內(nèi)容查詢(myPredicate
)的全部結(jié)果，綁定到類的myChildComponents
屬性。
@ViewChild(myPredicate) myChildComponent;
把組件視圖查詢(myPredicate
)的第一個(gè)結(jié)果綁定到類的myChildComponent
屬性。對(duì)指令無(wú)效。
@ViewChildren(myPredicate) myChildComponents;
把組件視圖查詢(myPredicate
)的全部結(jié)果綁定到類的myChildComponents
屬性。對(duì)指令無(wú)效
@SkipSelf裝飾器
在注入器injector層級(jí)中的祖先injector中查找 CoreModule
,如果沒(méi)有祖先injector則會(huì)提供一個(gè)CoreModule實(shí)例
