1. 程式人生 > >轉發: Angular裝飾器

轉發: Angular裝飾器

mit exports types app 負責 view oot 創建者 操作

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 元數據中屬性的匯總表:

屬性

說明

declarations

屬於該模塊的可聲明對象(組件、指令和管道)的列表。

  1. 當編譯模板時,你需要確定一組選擇器,它們將用於觸發相應的指令。

  2. 該模板在 NgModule 環境中編譯 —— 模板的組件是在該 NgModule 內部聲明的,它會使用如下規則來確定這組選擇器:

    • 列在 declarations 中的所有指令選擇器。

    • 從所導入的 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.

不要重復聲明從其它模塊中導入的類。

providers

依賴註入提供商的列表。

A list of dependency-injection providers.

Angular 會使用該模塊的註入器註冊這些提供商。 如果該模塊是啟動模塊,那就會使用根註入器。

當需要註入到任何組件、指令、管道或服務時,這些服務對於本註入器的子註入器都是可用的。

惰性加載模塊有自己的註入器,它通常是應用的根註入器的子註入器。

惰性加載的服務是局限於這個惰性加載模塊的註入器中的。 如果惰性加載模塊也提供了 UserService,那麽在這個模塊的上下文中創建的任何組件(比如在路由器導航時),都會獲得這個服務的本模塊內實例,而不是來自應用的根註入器的實例。

其它外部模塊中的組件也會使用它們自己的註入器提供的服務實例。

要深入了解關於多級註入器及其作用域,參見服務提供商。

imports

要折疊(Folded)進本模塊中的其它模塊。折疊的意思是從被導入的模塊中導出的那些軟件資產同樣會被聲明在這裏。

特別是,這裏列出的模塊,其導出的組件、指令或管道,當在組件模板中被引用時,和本模塊自己聲明的那些是等價的。

組件模板可以引用其它組件、指令或管道,不管它們是在本模塊中聲明的,還是從導入的模塊中導出的。 比如,只有當該模塊導入了 Angular 的 CommonModule(也可能從BrowserModule中間接導入)時,組件才能使用NgIfNgFor` 指令。

你可以從 CommonModule 中導入很多標準指令,不過也有些常用的指令屬於其它模塊。 比如,你只有導入了 Angular 的 FormsModule 時才能使用 [(ngModel)]

exports

可供導入了自己的模塊使用的可聲明對象(組件、指令、管道類)的列表。

導出的可聲明對象就是本模塊的公共 API。 只有當其它模塊導入了本模塊,並且本模塊導出了 UserComponent 時,其它模塊中的組件才能使用本模塊中的 UserComponent

默認情況下這些可聲明對象都是私有的。 如果本模塊沒有導出 UserComponent,那麽就只有本模塊中的組件才能使用 UserComponent

導入某個模塊並不會自動重新導出被導入模塊的那些導入。 模塊 B 不會因為它導入了模塊 A,而模塊 A 導入了 CommonModule 而能夠使用 ngIf。 模塊 B 必須自己導入 CommonModule

一個模塊可以把另一個模塊加入自己的 exports 列表中,這時,另一個模塊的所有公共組件、指令和管道都會被導出。

重新導出可以讓模塊被顯式傳遞。 如果模塊 A 重新導出了 CommonModule,而模塊 B 導入了模塊 A,那麽模塊 B 就可以使用 ngIf 了 —— 即使它自己沒有導入 CommonModule

bootstrap

要自動啟動的組件列表。

通常,在這個列表中只有一個組件,也就是應用的根組件。

Angular 也可以引導多個引導組件,它們每一個都在宿主頁面中有自己的位置。

啟動組件會自動添加到 entryComponents 中。

entryComponents

那些可以動態加載進視圖的組件列表。

默認情況下,Angular 應用至少有一個入口組件,也就是根組件 AppComponent。 它用作進入該應用的入口點,也就是說你通過引導它來啟動本應用。

路由組件也是入口組件,因為你需要動態加載它們。 路由器創建它們,並把它們扔到 DOM 中的 <router-outlet> 附近。

雖然引導組件和路由組件都是入口組件,不過你不用自己把它們加到模塊的 entryComponents 列表中,因為它們會被隱式添加進去。

Angular 會自動把模塊的 bootstrap 中的組件和路由定義中的組件添加到 entryComponents列表。

而那些使用不易察覺的ViewComponentRef.createComponent()的方式進行命令式引導的組件仍然需要添加。

動態組件加載在除路由器之外的大多數應用中都不太常見。如果你需要動態加載組件,就必須自己把那些組件添加到 entryComponents 列表中。

要了解更多,參見入口組件一章。

轉發: Angular裝飾器