angular6服務與依賴注入

在開發中,元件一般用來寫視圖有關的功能,服務則寫一些其他的邏輯,諸如從伺服器擷取資料、驗證使用者輸入或直接往控制台中寫日志等工作。

大概可以這麼了解：

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

我們的目的就是把Providers(提供商)注入到Injector(注入器)中。

方法1：@Injectable 裝飾器

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

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

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

方法2：@NgModule 中的 providers

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

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

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

方法3：在元件中注冊

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

這種方式注冊,會注冊到每個元件執行個體自己的注入器上。(多個元件會有多個注入器)

另：服務在每個注入器的範圍内是單例的。 在任何一個注入器中，最多隻會有同一個服務的一個執行個體。

 方法4：不提供圖紙

最常見的圖紙是class,但是在配置

providers: []

時,也可以不提供class圖紙,而是傳回對象的工廠函數,或是對象字面量

[{ provide: Logger, useClass: Logger }]

也可以使用

useValue

屬性直接傳遞一個對象執行個體

,[{ provide: Logger, useValue: silentLogger }]