摘要:告訴注入器如何創建該服務,可以通過設置元數據來配置注入器種方式在服務本身的裝飾器中。裝飾器具有一個名叫的元數據選項,在這里指定把被裝飾類的放到注入器中,或某個特定的注入器中。
angular 服務隨記 依賴注入
創建服務需要用到Injectable,@Injectable() 裝飾器把類標記為可供注入的服務,不過在使用該服務的 provider 配置好 Angular 的依賴注入器之前,Angular 實際上無法將其注入到任何位置。
provider告訴注入器如何創建該服務,可以通過設置元數據來配置注入器(3種方式):
在服務本身的 @Injectable() 裝飾器中。
在 NgModule 的 @NgModule() 裝飾器中。
在組件的 @Component() 裝飾器中。
@Injectable() 裝飾器具有一個名叫 providedIn 的元數據選項,在這里指定把被裝飾類的provider放到 root 注入器中,或某個特定 NgModule 的注入器中。
@NgModule() 和 @Component() 裝飾器都有用一個 providers 元數據選項,在那里你可以配置 NgModule 級或組件級的注入器。
注入器與服務實例在某個注入器范圍內,服務是單例的。應用只有一個根注入器,angular具有多級注入器系統,以為者下級注入器可以創建自己的服務實例。
每當 Angular 創建一個在 @Component() 中指定了 providers 的組件實例時,它也會為該實例創建一個新的子注入器。 類似的,當在運行期間加載一個新的 NgModule 時(即lazy module),Angular 也可以為它創建一個擁有自己的提供商的注入器。
借助注入器繼承機制,仍然可以把全應用級的服務注入到這些組件中。 組件的注入器是其父組件注入器的子節點,也是其父節點的父節點的后代,以此類推,直到應用的根注入器為止。 Angular 可以注入該繼承譜系中任何一個注入器提供的服務。
模塊化編程時,service、component、pipe等最好都放在module中,需要引入這些服務時,通過導入module來引用,不要直接import service 和component,這不符合模塊化思想。多級注入系統
應用程序中有一個與組件樹平行的注入器樹,對于在什么級別上注入會最終導致:
最終包的大小
服務的范圍
服務的生命周期
當在服務自身的@Injectable()裝飾器中指定provider時,CLI生產模式所用的優化工具可以進行搖樹優化,它會移除那些沒有用過的服務,搖樹優化生成的包更小。
三級providerroot級,是AppModule全局的,配置方法已提。
NgModule級,兩種方法:可以在module的@NgModule 的 provider 元數據中指定;也可以在@injectable() 的providerIn選項中指定某個模塊類
如果模塊是lazy modole,需要使用@NgModule的provider選項。
組件級為每個component實例配置自己的注入器
無論對于根級注入器還是模塊級注入器,服務實例的生存期都和應用或模塊本身相同。Angular 可以把這個服務實例注入到任何需要它的類中(即app內是單例的)。Angular 只能把相應的服務注入到該組件實例或其下級組件實例中,而不能把這個服務實例注入到其它地方(即組件內并不是單例的)。注入器冒泡
當一個組件申請獲得一個依賴時,Angular 先嘗試用該組件自己的注入器來滿足它。 如果該組件的注入器沒有找到對應的提供商,它就把這個申請轉給它父組件的注入器來處理。 如果那個注入器也無法滿足這個申請,它就繼續轉給它在注入器樹中的父注入器。 這個申請繼續往上冒泡 —— 直到 Angular 找到一個能處理此申請的注入器或者超出了組件樹中的祖先位置為止。 如果超出了組件樹中的祖先還未找到,Angular 就會拋出一個錯誤。
單例服務在angular中創建單例服務有兩種方式:
在創建服務時聲明該服務在應用的根上提供
把該服務包含在AppModule或者某個只會被AppModule導入的模塊中
這里第一條很容易理解。重點第二條:當通過@NgMododule()來聲明一個serivce時,這個服務在AppModule內將會是單例的,當一個module中提供了一個service,當另一個lazy module導入了這個模塊時,angular會為它創一個子注入器,會重新創建service的實例,此service也就多了一個實例。forRoot()
如果某個模塊同時提供了服務提供商和可聲明對象(組件、指令、管道),那么當在某個子注入器中加載它的時候(比如lazy module),就會生成多個該服務提供商的實例。 而存在多個實例會導致一些問題,因為這些實例會屏蔽掉根注入器中該服務提供商的實例,而它的本意可能是作為單例對象使用的。 因此,Angular 提供了一種方式來把服務提供商從該模塊中分離出來,以便該模塊既可以帶著 providers 被根模塊導入,也可以不帶 providers 被子模塊導入。
如上文所述,當在運行期間加載一個新的 NgModule 時(即lazy module),Angular 也可以為它創建一個注入器,所以此時導入的其他模塊中的service就生成了多個實例,而forRoot可以保證并不創建新的service實例,而是去引用root注入器中的service實例,也就保證了service依然是個單例服務。
Code在懶加載模塊中導入有service的TestDIModule模塊
@NgModule({ imports: [ CommonModule, BatteryRoutingModule, TestDIModule ], declarations: [BatteryWidgetComponent, BatteryTwoComponent, DemoComponent] })
在TestDIModule模塊中
@NgModule({ imports: [ CommonModule ], declarations: [TestDiComponent], exports: [TestDiComponent], providers: [ ] }) export class TestDIModule { static forRoot(): ModuleWithProviders { return { ngModule: TestDIModule, providers: [ TestDiService ] }; } }
在根模塊中引入TestDIModule模塊
imports: [ BrowserModule, TestDIModule.forRoot(), ],
最后在根模塊路由中添加這個懶加載模塊
const routes: Routes = [ { path: "battery", loadChildren: "./battery-widget/battery.widget.module#BatteryWidgetModule" }, ]; @NgModule({ exports: [ RouterModule ], imports: [ RouterModule.forRoot(routes) ], })
作為測試,可以在TestDIModule中的service中打log看一下
import { Injectable, ModuleWithProviders } from "@angular/core"; import { TestDIModule } from "./test-di.module" @Injectable() export class TestDiService { constructor() { console.log("->TestDiService"); } addCoount() { this.count++; console.log("->count", this.count); } count = 0; }
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/104103.html
摘要:無主題,內容為感觸較深的一些答疑探討等,摘自多篇文章,侵刪為什么是單線程的單線程,與它的用途有關。作為瀏覽器腳本語言,的主要用途是與用戶互動,以及操作。這決定了它只能是單線程,否則會帶來很復雜的同步問題。摘自運行機制詳解再談作者阮一峰 無主題,內容為感觸較深的一些答疑、探討等,摘自多篇文章,侵刪 1、為什么JavaScript是單線程 JavaScript的單線程,與它的用途有關。作...
摘要:此過程中,頁面的解析與用戶的交互都是阻塞的。非阻塞腳本延時腳本可以給標簽添加一個屬性,這個屬性表明元素中的腳本不打算修改,因此代碼可以稍后執行。此技術的重點在于無論在何處啟動下載,腳本的下載和運行都不會阻塞頁面的處理過程。 當瀏覽器遇到標簽時,頁面的加載、介些都會停下來,運行此javascript代碼,然后再繼續加載。這種事情同樣會發生在那些以src屬性調用的外部腳本,瀏覽器首先下載外...
摘要:操作的代價非常昂貴,對元素節點的訪問和修改樣式布局的改變以及事件的綁定都影響著網頁的性能。所以,盡量減少對布局信息的查詢次數,并用局部變量參與計算。當動畫結束時,重新定位,從而只一次下移文檔其他元素的位置。這樣可以最小化事件句柄數量。 DOM操作的代價非常昂貴,對元素節點的訪問和修改、樣式、布局的改變以及DOM事件的綁定都影響著網頁的性能。 批量修改DOM 如果要對元素節...
閱讀 3005·2021-10-12 10:12
閱讀 3052·2021-09-22 16:04
閱讀 3287·2019-08-30 15:54
閱讀 2602·2019-08-29 16:59
閱讀 2902·2019-08-29 16:08
閱讀 868·2019-08-29 11:20
閱讀 3492·2019-08-28 18:08
閱讀 648·2019-08-26 13:43