小編給大家分享一下angular服務(wù)的示例分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
在江陵等地區(qū),都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局,加強(qiáng)發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力,以專注、極致的服務(wù)理念,為客戶提供成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì) 網(wǎng)站設(shè)計(jì)制作按需制作,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站建設(shè),網(wǎng)絡(luò)營銷推廣,成都外貿(mào)網(wǎng)站建設(shè)公司,江陵網(wǎng)站建設(shè)費(fèi)用合理。
依賴注入
創(chuàng)建服務(wù)需要用到Injectable,@Injectable() 裝飾器把類標(biāo)記為可供注入的服務(wù),不過在使用該服務(wù)的 provider 配置好 Angular 的依賴注入器之前,Angular 實(shí)際上無法將其注入到任何位置。
provider告訴注入器如何創(chuàng)建該服務(wù),可以通過設(shè)置元數(shù)據(jù)來配置注入器(3種方式):
在服務(wù)本身的 @Injectable() 裝飾器中。
在 NgModule 的 @NgModule() 裝飾器中。
在組件的 @Component() 裝飾器中。
@Injectable() 裝飾器具有一個(gè)名叫 providedIn 的元數(shù)據(jù)選項(xiàng),在這里指定把被裝飾類的provider放到 root 注入器中,或某個(gè)特定 NgModule 的注入器中。
@NgModule() 和 @Component() 裝飾器都有用一個(gè) providers 元數(shù)據(jù)選項(xiàng),在那里你可以配置 NgModule 級或組件級的注入器。
注入器與服務(wù)實(shí)例
在某個(gè)注入器范圍內(nèi),服務(wù)是單例的。應(yīng)用只有一個(gè)根注入器,angular具有多級注入器系統(tǒng),以為者下級注入器可以創(chuàng)建自己的服務(wù)實(shí)例。
每當(dāng) Angular 創(chuàng)建一個(gè)在 @Component() 中指定了 providers 的組件實(shí)例時(shí),它也會(huì)為該實(shí)例創(chuàng)建一個(gè)新的子注入器。 類似的,當(dāng)在運(yùn)行期間加載一個(gè)新的 NgModule 時(shí)(即lazy module),Angular 也可以為它創(chuàng)建一個(gè)擁有自己的提供商的注入器。
借助注入器繼承機(jī)制,仍然可以把全應(yīng)用級的服務(wù)注入到這些組件中。 組件的注入器是其父組件注入器的子節(jié)點(diǎn),也是其父節(jié)點(diǎn)的父節(jié)點(diǎn)的后代,以此類推,直到應(yīng)用的根注入器為止。 Angular 可以注入該繼承譜系中任何一個(gè)注入器提供的服務(wù)。
模塊化編程時(shí),service、component、pipe等最好都放在module中,需要引入這些服務(wù)時(shí),通過導(dǎo)入module來引用,不要直接import service 和component,這不符合模塊化思想。
多級注入系統(tǒng)
應(yīng)用程序中有一個(gè)與組件樹平行的注入器樹,對于在什么級別上注入會(huì)最終導(dǎo)致:
最終包的大小
服務(wù)的范圍
服務(wù)的生命周期
當(dāng)在服務(wù)自身的@Injectable()裝飾器中指定provider時(shí),CLI生產(chǎn)模式所用的優(yōu)化工具可以進(jìn)行搖樹優(yōu)化,它會(huì)移除那些沒有用過的服務(wù),搖樹優(yōu)化生成的包更小。
三級provider
root級,是AppModule全局的,配置方法已提。
NgModule級,兩種方法:可以在module的@NgModule 的 provider 元數(shù)據(jù)中指定;也可以在@injectable() 的providerIn選項(xiàng)中指定某個(gè)模塊類
如果模塊是lazy modole,需要使用@NgModule的provider選項(xiàng)。
組件級為每個(gè)component實(shí)例配置自己的注入器
無論對于根級注入器還是模塊級注入器,服務(wù)實(shí)例的生存期都和應(yīng)用或模塊本身相同。Angular 可以把這個(gè)服務(wù)實(shí)例注入到任何需要它的類中(即app內(nèi)是單例的)。Angular 只能把相應(yīng)的服務(wù)注入到該組件實(shí)例或其下級組件實(shí)例中,而不能把這個(gè)服務(wù)實(shí)例注入到其它地方(即組件內(nèi)并不是單例的)。
注入器冒泡
當(dāng)一個(gè)組件申請獲得一個(gè)依賴時(shí),Angular 先嘗試用該組件自己的注入器來滿足它。 如果該組件的注入器沒有找到對應(yīng)的提供商,它就把這個(gè)申請轉(zhuǎn)給它父組件的注入器來處理。 如果那個(gè)注入器也無法滿足這個(gè)申請,它就繼續(xù)轉(zhuǎn)給它在注入器樹中的父注入器。 這個(gè)申請繼續(xù)往上冒泡 —— 直到 Angular 找到一個(gè)能處理此申請的注入器或者超出了組件樹中的祖先位置為止。 如果超出了組件樹中的祖先還未找到,Angular 就會(huì)拋出一個(gè)錯(cuò)誤。
單例服務(wù)
在angular中創(chuàng)建單例服務(wù)有兩種方式:
在創(chuàng)建服務(wù)時(shí)聲明該服務(wù)在應(yīng)用的根上提供
把該服務(wù)包含在AppModule或者某個(gè)只會(huì)被AppModule導(dǎo)入的模塊中
這里第一條很容易理解。重點(diǎn)第二條:當(dāng)通過@NgMododule()來聲明一個(gè)serivce時(shí),這個(gè)服務(wù)在AppModule內(nèi)將會(huì)是單例的,當(dāng)一個(gè)module中提供了一個(gè)service,當(dāng)另一個(gè)lazy module導(dǎo)入了這個(gè)模塊時(shí),angular會(huì)為它創(chuàng)一個(gè)子注入器,會(huì)重新創(chuàng)建service的實(shí)例,此service也就多了一個(gè)實(shí)例。
forRoot()
如果某個(gè)模塊同時(shí)提供了服務(wù)提供商和可聲明對象(組件、指令、管道),那么當(dāng)在某個(gè)子注入器中加載它的時(shí)候(比如lazy module),就會(huì)生成多個(gè)該服務(wù)提供商的實(shí)例。 而存在多個(gè)實(shí)例會(huì)導(dǎo)致一些問題,因?yàn)檫@些實(shí)例會(huì)屏蔽掉根注入器中該服務(wù)提供商的實(shí)例,而它的本意可能是作為單例對象使用的。 因此,Angular 提供了一種方式來把服務(wù)提供商從該模塊中分離出來,以便該模塊既可以帶著 providers 被根模塊導(dǎo)入,也可以不帶 providers 被子模塊導(dǎo)入。
如上文所述,當(dāng)在運(yùn)行期間加載一個(gè)新的 NgModule 時(shí)(即lazy module),Angular 也可以為它創(chuàng)建一個(gè)注入器,所以此時(shí)導(dǎo)入的其他模塊中的service就生成了多個(gè)實(shí)例,而forRoot可以保證并不創(chuàng)建新的service實(shí)例,而是去引用root注入器中的service實(shí)例,也就保證了service依然是個(gè)單例服務(wù)。
Code
在懶加載模塊中導(dǎo)入有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(), ],
最后在根模塊路由中添加這個(gè)懶加載模塊
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; }
以上是“angular服務(wù)的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
網(wǎng)頁題目:angular服務(wù)的示例分析
URL分享:http://m.newbst.com/article42/gscphc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設(shè)計(jì)公司、網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、企業(yè)建站、域名注冊、網(wǎng)站營銷
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)