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

先解釋兩個概念:

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

假想一個去醫院看病的過程:

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

這里醫生開的處方是providers,將處方交給護士則是將providers注冊到injector,護士小姐姐是injector

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

@Injectable 裝飾器

在服務類的 @Injectable 裝飾器中

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

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

這種方式注冊,在代碼編譯打包時,可以執行搖樹優化，這會移除所有沒在應用中使用過的服務。搖樹優化會使打包體積更小。

@NgModule 中的 providers

在模塊的 @NgModule 中

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

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

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

在組件中注冊

在組件的 @Component 中

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

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

note:服務在每個注入器的范圍內是單例的。 在任何一個注入器中，最多只會有同一個服務的一個實例。

不提供圖紙

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

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。