angular中的裝飾器 詳解

Angular中的裝飾器是一個函數，它将中繼資料添加到類、類成員（屬性、方法）和函數參數。

用法：要想應用裝飾器，把它放到被裝飾對象的上面或左邊。

Angular 使用自己的一套裝飾器來實作應用程式各部件之間的互相操作

這個地方是前面幾個子產品子產品、指令、元件、依賴注入等從裝飾器這個側面的整理

你需要做的：

1.搞清楚了解TypeScript的裝飾器的原理

2.搞清楚這裡面每一個裝飾器的作用，解決的什麼問題，應用場景

類裝飾器******

Angular 有很多裝飾器，它們負責把中繼資料附加到類上，以了解那些類的設計意圖以及它們應如何工作。

類裝飾器應用于類構造函數，可以用來監視，修改或替換類定義。

類裝飾器表達式會在運作時當作函數被調用，類的構造函數作為其唯一的參數。

@Component标記類作為元件并收集元件配置中繼資料(繼承Directive)

@Directive标記類作為指令并收集元件配置中繼資料

聲明目前類是一個指令，并提供關于該指令的中繼資料

@Pipe******

聲明目前類是一個管道，并且提供關于該管道的中繼資料

@Injectable标記中繼資料并可以使用Injector注入器注入

聲明目前類有一些依賴，當依賴注入器建立該類的執行個體時，這些依賴應該被注入到構造函數中。

@NgModule******

NgModule是一個裝飾器函數，它接收一個用來描述子產品屬性的中繼資料對象。其中最重要的屬性是：

declarations -聲明本子產品中擁有的視圖類。(Angular有三種視圖類：

元件

、

指令

和

管道

？。)

exports - declarations的子集，可用于其它子產品的元件

模闆

。Ps：子產品導出聲明

imports -本子產品聲明的元件模闆需要的類所在的其它子產品。Ps:子產品導入聲明

providers -

服務

的建立者，并加入到全局服務清單中，可用于應用任何部分。？？？？完全沒懂說啥

bootstrap -指定應用的主視圖（稱為根元件），它是所有其它視圖的宿主。隻有根子產品才能設定bootstrap屬性。

**屬性裝飾器******

屬性裝飾器表達式會在運作時當作函數被調用，

傳入下列2個參數：

對于靜态成員來說是類的構造函數，對于執行個體成員是類的原型對象。

成員的名字。

**@Input******

聲明一個輸入屬性，以便我們可以通過屬性綁定更新它。

**@Output******

聲明一個輸出屬性，以便我們可以通過事件綁定進行訂閱。

**@Hostbinding********把宿主元素的屬性(比如CSS類）綁定到指令/元件的屬性******

**@HostListener******

通過指令/元件的方法訂閱宿主元素的事件

@ContentChild配置一個内容查詢

@ViewChild配置一個視圖查詢

@ContentChildren配置多個個内容查詢(傳回QueryList類型)

@ViewChildren配置多個視圖查詢(傳回QueryList類型)

參數裝飾器******

參數裝飾器表達式會在運作時當作函數被調用，

傳入下列3個參數：

參數在函數參數清單中的索引。

注意參數裝飾器隻能用來監視一個方法的參數是否被傳入。

@Inject指定依賴關系的參數裝飾器(一般用來注入被标記Injectable的類)

@Optional将依賴項标記為可選的參數中繼資料. 如果沒有找到依賴關系,注射器将提供null

@Self指定注射器隻能從本身檢索依賴關系****

@SkipSelf指定注射器隻能從父類檢索依賴關系****

@Host按照依賴關系來檢索