Angular6中服務(wù)和依賴注入的示例分析

這篇文章主要介紹Angular6中服務(wù)和依賴注入的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

在開發(fā)中,組件一般用來寫視圖有關(guān)的功能,服務(wù)則寫一些其他的邏輯,諸如從服務(wù)器獲取數(shù)據(jù)、驗(yàn)證用戶輸入或直接往控制臺中寫日志等工作.

先解釋兩個概念:

1. Providers(提供商):是個比較抽象的名詞,我們把它想象為'圖紙'更好理解一些,就比如我們想要生產(chǎn)汽車,就需要先有汽車的圖紙,圖紙上記錄了生產(chǎn)工藝和材料尺寸之類,這樣汽車才生產(chǎn)的出來.provider通常就是自己寫的服務(wù)類.

2. Injector(注入器):就是字面上的意思,將某一類事物注入到另一類事物中的工具.angular應(yīng)用在啟動時(shí),會自動創(chuàng)建.

假想一個去醫(yī)院看病的過程:

找醫(yī)生看病判斷病情,醫(yī)生開處方 --> 處方交給護(hù)士 --> 護(hù)士小姐姐根據(jù)處方給你注射藥物.

這里醫(yī)生開的處方是providers,將處方交給護(hù)士則是將providers注冊到injector,護(hù)士小姐姐是injector

angular中有很多方式可以將providers注冊到injector:

@Injectable 裝飾器

在服務(wù)類的 @Injectable 裝飾器中

  //service
  @Injectable({
    providedIn: 'root',
  })

providedIn: 'root' 告訴 Angular在根注入器中注冊這個圖紙.root 還可以是某一個具體的模塊名.

這種方式注冊,在代碼編譯打包時(shí),可以執(zhí)行搖樹優(yōu)化，這會移除所有沒在應(yīng)用中使用過的服務(wù)。搖樹優(yōu)化會使打包體積更小。

@NgModule 中的 providers

在模塊的 @NgModule 中

  //service
  @Injectable()
  //module
  @NgModule({
    providers: [
      UserService,
      { provide: APP_CONFIG, useValue: HERO_DI_CONFIG }
    ],
  })

這種方式注冊,可以對圖紙進(jìn)行一些額外的配置.

note:在@NgModule中注冊的服務(wù),在圖紙中也需要寫@Injectable()裝飾器

在組件中注冊

在組件的 @Component 中

  @Component({
  selector: 'app-heroes',
  providers: [ HeroService ]

這種方式注冊,會注冊到每個組件實(shí)例自己的注入器上。(多個組件會有多個注入器)

note:服務(wù)在每個注入器的范圍內(nèi)是單例的。 在任何一個注入器中，最多只會有同一個服務(wù)的一個實(shí)例。

不提供圖紙

最常見的圖紙是class,但是在配置providers: []時(shí),也可以不提供class圖紙,而是返回對象的工廠函數(shù),或是對象字面量[{ provide: Logger, useClass: Logger }]

也可以使用useValue屬性直接交付一個對象實(shí)例,[{ provide: Logger, useValue: silentLogger }]

以上是“Angular6中服務(wù)和依賴注入的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！