資訊專欄INFORMATION COLUMN
摘要：把組件和服務(wù)區(qū)分開，以提高模塊性和復(fù)用性。而要把這些任務(wù)委托給各種服務(wù)。它只會(huì)通過依賴注入讓你能更容易地將應(yīng)用邏輯分解為服務(wù)，并讓這些服務(wù)可用于各個(gè)組件中。
Angular 把組件和服務(wù)區(qū)分開，以提高模塊性和復(fù)用性。
通過把組件中和視圖有關(guān)的功能與其他類型的處理分離開，你可以讓組件類更加精簡、高效。 理想情況下，組件的工作只管用戶體驗(yàn)，而不用顧及其它。 它應(yīng)該提供用于數(shù)據(jù)綁定的屬性和方法，以便作為視圖（由模板渲染）和應(yīng)用邏輯（通常包含一些模型的概念）的中介者。
組件不應(yīng)該定義任何諸如從服務(wù)器獲取數(shù)據(jù)、驗(yàn)證用戶輸入或直接往控制臺(tái)中寫日志等工作。 而要把這些任務(wù)委托給各種服務(wù)。通過把各種處理任務(wù)定義到可注入的服務(wù)類中，你可以讓它可以被任何組件使用。 通過在不同的環(huán)境中注入同一種服務(wù)的不同提供商，你還可以讓你的應(yīng)用更具適應(yīng)性。
Angular 不會(huì)強(qiáng)制遵循這些原則。它只會(huì)通過依賴注入讓你能更容易地將應(yīng)用邏輯分解為服務(wù)，并讓這些服務(wù)可用于各個(gè)組件中。
在Angular中使用服務(wù),首先根據(jù)需要的功能,寫一個(gè)服務(wù)類(angular中稱為provider),然后將該服務(wù)類注冊(cè)到注入器中(應(yīng)用啟動(dòng)時(shí)自動(dòng)創(chuàng)建),之后就可以在組件類或其他服務(wù)中通過Angular的依賴注入系統(tǒng)使用了,Angular會(huì)自動(dòng)將該類實(shí)例化,并處理好依賴關(guān)系.
在Angular中有很多方式可以將服務(wù)類注冊(cè)到注入器中:
@Injectable 元數(shù)據(jù)中的providedIn屬性
@NgModule 元數(shù)據(jù)中的 providers屬性
@Component 元數(shù)據(jù)中的 providers屬性
不同的注冊(cè)方式,生成的服務(wù)也有所不同.
在服務(wù)類的 @Injectable 裝飾器中:
//service
@Injectable({
providedIn: "root",
})
providedIn: "root" 告訴 Angular在根注入器中注冊(cè)這個(gè)服務(wù),這也是使用CLI生成服務(wù)時(shí)默認(rèn)的方式.
這種方式注冊(cè),不需要再@NgModule裝飾器中寫providers,而且在代碼編譯打包時(shí),可以執(zhí)行搖樹優(yōu)化，會(huì)移除所有沒在應(yīng)用中使用過的服務(wù)。推薦使用此種方式注冊(cè)服務(wù).
在模塊@NgModule 中的 providers
//service
@Injectable()
//module
@NgModule({
providers: [
UserService,
{ provide: APP_CONFIG, useValue: HERO_DI_CONFIG }
],
})
這種方式注冊(cè),可以對(duì)服務(wù)進(jìn)行一些額外的配置(服務(wù)類中也需要寫@Injectable()裝飾器).
在組件 @Component 中的 providers
@Component({
selector: "app-heroes",
providers: [ HeroService ]
這種方式注冊(cè),會(huì)注冊(cè)到每個(gè)組件實(shí)例自己的注入器上。(多個(gè)組件會(huì)有多個(gè)注入器)
不提供服務(wù)類
最常見的圖紙是class,但是在配置providers: []時(shí),也可以不提供服務(wù)類,而是返回對(duì)象的工廠函數(shù),或是對(duì)象字面量[{ provide: Logger, useClass: Logger }]
也可以使用useValue屬性直接交付一個(gè)對(duì)象實(shí)例,[{ provide: Logger, useValue: silentLogger }]
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/95712.html
摘要：發(fā)布通過回調(diào)方法向發(fā)布事件。觀察者一個(gè)回調(diào)函數(shù)的集合，它知道如何去監(jiān)聽由提供的值。 本文目錄 一、項(xiàng)目起步 二、編寫路由組件 三、編寫頁面組件 1.編寫單一組件 2.模擬數(shù)據(jù) 3.編寫主從組件 四、編寫服務(wù) 1.為什么需要服務(wù) 2.編寫服務(wù) 五、引入RxJS 1.關(guān)于RxJS 2.引入RxJS 3.改造數(shù)據(jù)獲取方式 六、改造組件 1.添...
摘要：解決辦法很簡單，既然無法注入就不注入?？梢岳霉S類代替直接注入的方式。示例代碼如下利用對(duì)象去操作元素即可 這個(gè)錯(cuò)誤一般是在構(gòu)造函數(shù)中 注入 Renderer2 引起的。 解決辦法很簡單，既然無法注入Renderer2就不注入?？梢岳霉S類RendererFactory2 代替直接注入Renderer2的方式。示例代碼如下： import { Renderer2, RendererF...
摘要：在上一篇博文用戶列表與詳情展示中我們用實(shí)現(xiàn)了用戶列表的展示并通過語法實(shí)現(xiàn)了列表單擊時(shí)將單擊的對(duì)象傳到后臺(tái)的功能最后為了防止初次加載對(duì)象為空導(dǎo)致的錯(cuò)誤我們又使用了語法來對(duì)要展示的詳情對(duì)象進(jìn)行判空操作但隨著后續(xù)模塊的增多以及業(yè)務(wù)的交叉我們 在上一篇博文《Angular6.x---用戶列表與詳情展示》中,我們用ngFor=let object of list實(shí)現(xiàn)了用戶列表的展示,并通過...
摘要：然后我們?cè)诟附M件上添加事件監(jiān)聽，并傳入本地的在對(duì)應(yīng)的中添加方法再來，我們?cè)谧咏M件上多導(dǎo)入和，并添加修飾器和調(diào)用這樣就實(shí)現(xiàn)了我們父子組件之間的事件傳遞啦，現(xiàn)在我們的頁面還是正常運(yùn)行，并且刪除一條數(shù)據(jù)后，頁面數(shù)據(jù)會(huì)更新。 本文目錄 一、項(xiàng)目起步 二、編寫路由組件 三、編寫頁面組件 1.編寫單一組件 2.模擬數(shù)據(jù) 3.編寫主從組件 四、編寫服務(wù) 1.為什么需要服務(wù) ...
摘要：啟動(dòng)服務(wù)，并打開新窗口可簡寫創(chuàng)建新組件可簡寫創(chuàng)建新服務(wù)創(chuàng)建路由模塊其他另外還有很多的命令提供，詳細(xì)可以查閱官方文檔命令。引入路由模塊導(dǎo)出路由模塊的指令這里需要添加一個(gè)數(shù)組，并傳入，導(dǎo)出讓路由器的相關(guān)指令可以在中的組件中使用。 本文目錄 一、項(xiàng)目起步 二、編寫路由組件 三、編寫頁面組件 1.編寫單一組件 2.模擬數(shù)據(jù) 3.編寫主從組件 四、編寫服務(wù) 1.為什么需要服務(wù) 2....
閱讀 2917·2021-11-25 09:43
閱讀 2342·2021-11-24 09:39
閱讀 2728·2021-09-23 11:51
閱讀 1419·2021-09-07 10:11
閱讀 1467·2019-08-27 10:52
閱讀 1949·2019-08-26 12:13
閱讀 3369·2019-08-26 11:57
閱讀 1407·2019-08-26 11:31
