Angular6中服務和依賴注入的示例分析

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

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

先解釋兩個概念:

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 }]

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