Angular中的裝飾器是一個函數,它將元數據添加到類、類成員(屬性、方法)和函數參數。 用法:要想應用裝飾器,把它放在被裝飾對象的上面或左邊。 Angular使用自己的一套裝飾器來實現應用程式各部件之間的相互操作。 這個地方是前面幾個模塊(Modules), 指令(Diretives)、組件(Co ...
Angular中的裝飾器是一個函數,它將元數據添加到類、類成員(屬性、方法)和函數參數。
用法:要想應用裝飾器,把它放在被裝飾對象的上面或左邊。
Angular使用自己的一套裝飾器來實現應用程式各部件之間的相互操作。
這個地方是前面幾個模塊(Modules), 指令(Diretives)、組件(Components)、依賴註入(Dependency Injection)等從裝飾器這個側面的整理。
你需要做的:
1、搞清楚理解TypeScript的裝飾器原理。
2、搞清楚這裡面每一個裝飾器的作用,解決的什麼問題,應用場景。
類裝飾器:
Angular有很多裝飾器,它們負責把元數據附加到類上,以瞭解那些設計意圖以及它們應怎樣工作。
類裝飾器應用於類構造函數,可以用來監視,修改或替換類定義。
類裝飾器表達式會在運行時當作函數被調用,類的構造函數作為其唯一的參數。
@Component標記類作為組件並收集組件配置元數據(繼承Directive)
@Directive標記類作為指令並收集組件配置元數據
聲明當前類是一個它令,並提供關於該指令的元數據。
@Pipe 聲明當前類是一個管道,並且提供關於該管道的元數據
@Injectable標記元數據並可以使用Injector註放器註入
聲明當前類有一些依賴,當依賴註入器創建該類的實例時,這些依賴應該被註入到構造函數中。
@NgModule
NgModule是一個裝飾器函數,它接收一個用來描述模塊屬性的元數據對象。其中最重要的屬性是:
declaration-聲明本模塊中擁有的視圖類。(Angular有三種視圖類:組件、指令和管道)
exports-declaration的子集,可用於其它模塊的組件模板。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按照依賴關係來檢索。
補充:關於NgModule裝飾器更全的說明,來自官方文檔
@NgModule
元數據
下麵是 @NgModule
元數據中屬性的彙總表:
屬性 |
說明 |
---|---|
|
屬於該模塊的可聲明對象(組件、指令和管道)的列表。
組件、指令和管道只能屬於一個模塊。 如果嘗試把同一個類聲明在多個模塊中,編譯器就會報告一個錯誤。 Components, directives, and pipes must belong to exactly one module. The compiler emits an error if you try to declare the same class in more than one module. 不要重覆聲明從其它模塊中導入的類。 |
|
依賴註入提供商的列表。 A list of dependency-injection providers. Angular 會使用該模塊的註入器註冊這些提供商。 如果該模塊是啟動模塊,那就會使用根註入器。 當需要註入到任何組件、指令、管道或服務時,這些服務對於本註入器的子註入器都是可用的。 惰性載入模塊有自己的註入器,它通常是應用的根註入器的子註入器。 惰性載入的服務是局限於這個惰性載入模塊的註入器中的。 如果惰性載入模塊也提供了 其它外部模塊中的組件也會使用它們自己的註入器提供的服務實例。 要深入瞭解關於多級註入器及其作用域,參見服務提供商。 |
|
要摺疊(Folded)進本模塊中的其它模塊。摺疊的意思是從被導入的模塊中導出的那些軟體資產同樣會被聲明在這裡。 特別是,這裡列出的模塊,其導出的組件、指令或管道,當在組件模板中被引用時,和本模塊自己聲明的那些是等價的。 組件模板可以引用其它組件、指令或管道,不管它們是在本模塊中聲明的,還是從導入的模塊中導出的。 比如,只有當該模塊導入了 Angular 的 你可以從 |
|
可供導入了自己的模塊使用的可聲明對象(組件、指令、管道類)的列表。 導出的可聲明對象就是本模塊的公共 API。 只有當其它模塊導入了本模塊,並且本模塊導出了 預設情況下這些可聲明對象都是私有的。 如果本模塊沒有導出 導入某個模塊並不會自動重新導出被導入模塊的那些導入。 模塊 B 不會因為它導入了模塊 A,而模塊 A 導入了 一個模塊可以把另一個模塊加入自己的 重新導出可以讓模塊被顯式傳遞。 如果模塊 A 重新導出了 |
|
要自動啟動的組件列表。 通常,在這個列表中只有一個組件,也就是應用的根組件。 Angular 也可以引導多個引導組件,它們每一個都在宿主頁面中有自己的位置。 啟動組件會自動添加到 |
|
那些可以動態載入進視圖的組件列表。 預設情況下,Angular 應用至少有一個入口組件,也就是根組件 路由組件也是入口組件,因為你需要動態載入它們。 路由器創建它們,並把它們扔到 DOM 中的 雖然引導組件和路由組件都是入口組件,不過你不用自己把它們加到模塊的 Angular 會自動把模塊的 而那些使用不易察覺的 動態組件載入在除路由器之外的大多數應用中都不太常見。如果你需要動態載入組件,就必須自己把那些組件添加到 要瞭解更多,參見入口組件一章。 |