快速入門Angular(二):依賴注入@injectable 與 provider

@Injectable vs Provider

@injectable provider
中文意思 可被注入的 提供者
使用位置 是一裝飾器,寫在service上 是ngModule或Component傳入參數
主要功能 用以標記此class具有依賴注入的特性 傳入模組,做為該模組的公用函數
補充說明 由於只有service會使用依賴注入,也就是只有service才會打上此裝飾器 通常寫在ngModule就好。若是Component間不想要共用,需要各自實例化自己的service避免干擾,則寫在Component的provider裡面

寫ngModule或component都會有跟自己名字相似的裝飾器
但service卻沒有@service裝飾器?其實就是@injectable
畢竟service主要功能是當要使用時才注入,用injectable(可被注入的)字眼可以更形象地表達他的用途!

@injectable 中的參數 providedIn

1
2
3
@Injectable({
providedIn: 'root',
})

這是在Angular 6中新加入的功能

大部份情況下,providedIn直接寫'root'就好,Angular會自動判斷該打包到哪裡
只有真正使用此service的才會注入進去,未使用到的部份會搖樹優化(tree-shaking)掉

providedIn出現之前,service通常是直接寫在ngModule中來注入,就會造成大量的服務打包進去

參考資料

知乎/Angular 6+依赖注入使用指南:providedIn与providers对比
Angular官方文件/多級依賴注入器