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

先解釋兩個(gè)概念:

1. Providers(提供商):是個(gè)比較抽象的名詞,我們把它想象為'圖紙'更好理解一些,就比如我們想要生產(chǎn)汽車(chē),就需要先有汽車(chē)的圖紙,圖紙上記錄了生產(chǎn)工藝和材料尺寸之類(lèi),這樣汽車(chē)才生產(chǎn)的出來(lái).provider通常就是自己寫(xiě)的服務(wù)類(lèi).
2. Injector(注入器):就是字面上的意思,將某一類(lèi)事物注入到另一類(lèi)事物中的工具.angular應(yīng)用在啟動(dòng)時(shí),會(huì)自動(dòng)創(chuàng)建.

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

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

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

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

@Injectable 裝飾器

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

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

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

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

@NgModule 中的 providers

在模塊的 @NgModule 中

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

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

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

在組件中注冊(cè)

在組件的 @Component 中

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

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

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

不提供圖紙

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論