Angular6的服務和依賴注入

sugarmo 發布于2019-08-22 18:18 / 2859人閱讀

摘要：把組件和服務區分開，以提高模塊性和復用性。而要把這些任務委托給各種服務。它只會通過依賴注入讓你能更容易地將應用邏輯分解為服務，并讓這些服務可用于各個組件中。

Angular 把組件和服務區分開，以提高模塊性和復用性。

通過把組件中和視圖有關的功能與其他類型的處理分離開，你可以讓組件類更加精簡、高效。理想情況下，組件的工作只管用戶體驗，而不用顧及其它。它應該提供用于數據綁定的屬性和方法，以便作為視圖（由模板渲染）和應用邏輯（通常包含一些模型的概念）的中介者。

組件不應該定義任何諸如從服務器獲取數據、驗證用戶輸入或直接往控制臺中寫日志等工作。而要把這些任務委托給各種服務。通過把各種處理任務定義到可注入的服務類中，你可以讓它可以被任何組件使用。通過在不同的環境中注入同一種服務的不同提供商，你還可以讓你的應用更具適應性。

Angular 不會強制遵循這些原則。它只會通過依賴注入讓你能更容易地將應用邏輯分解為服務，并讓這些服務可用于各個組件中。

在Angular中使用服務,首先根據需要的功能,寫一個服務類(angular中稱為provider),然后將該服務類注冊到注入器中(應用啟動時自動創建),之后就可以在組件類或其他服務中通過Angular的依賴注入系統使用了,Angular會自動將該類實例化,并處理好依賴關系.

在Angular中有很多方式可以將服務類注冊到注入器中:

@Injectable 元數據中的providedIn屬性

@NgModule 元數據中的 providers屬性

@Component 元數據中的 providers屬性

不同的注冊方式,生成的服務也有所不同.

在服務類的 @Injectable 裝飾器中:

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

providedIn: "root" 告訴 Angular在根注入器中注冊這個服務,這也是使用CLI生成服務時默認的方式.
這種方式注冊,不需要再@NgModule裝飾器中寫providers,而且在代碼編譯打包時,可以執行搖樹優化，會移除所有沒在應用中使用過的服務。推薦使用此種方式注冊服務.

在模塊@NgModule 中的 providers

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

這種方式注冊,可以對服務進行一些額外的配置(服務類中也需要寫@Injectable()裝飾器).

在組件 @Component 中的 providers

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

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

不提供服務類

最常見的圖紙是class,但是在配置providers: []時,也可以不提供服務類,而是返回對象的工廠函數,或是對象字面量[{ provide: Logger, useClass: Logger }]
也可以使用useValue屬性直接交付一個對象實例,[{ provide: Logger, useValue: silentLogger }]

GPU云服務器云服務器依賴注入依賴注入方式 js依賴注入構造函數依賴注入

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/95712.html

【CuteJavaScript】Angular6入門項目（3.編寫服務和引入RxJS）

摘要：發布通過回調方法向發布事件。觀察者一個回調函數的集合，它知道如何去監聽由提供的值。本文目錄一、項目起步二、編寫路由組件三、編寫頁面組件 1.編寫單一組件 2.模擬數據 3.編寫主從組件四、編寫服務 1.為什么需要服務 2.編寫服務五、引入RxJS 1.關于RxJS 2.引入RxJS 3.改造數據獲取方式六、改造組件 1.添...

RebeccaZhong 2019-08-23 15:25 評論0 收藏0
Angular6錯誤 Service: No provider for Renderer2

摘要：解決辦法很簡單，既然無法注入就不注入。可以利用工廠類代替直接注入的方式。示例代碼如下利用對象去操作元素即可這個錯誤一般是在構造函數中注入 Renderer2 引起的。解決辦法很簡單，既然無法注入Renderer2就不注入。可以利用工廠類RendererFactory2 代替直接注入Renderer2的方式。示例代碼如下： import { Renderer2, RendererF...

rickchen 2019-08-23 15:31 評論0 收藏0
初探Angular6.x---主從組件

摘要：在上一篇博文用戶列表與詳情展示中我們用實現了用戶列表的展示并通過語法實現了列表單擊時將單擊的對象傳到后臺的功能最后為了防止初次加載對象為空導致的錯誤我們又使用了語法來對要展示的詳情對象進行判空操作但隨著后續模塊的增多以及業務的交叉我們　　　在上一篇博文《Angular6.x---用戶列表與詳情展示》中,我們用ngFor=let object of list實現了用戶列表的展示,并通過...

FingerLiu 2019-08-19 11:06 評論0 收藏0
【CuteJavaScript】Angular6入門項目（4.改造組件和添加HTTP服務）

摘要：然后我們在父組件上添加事件監聽，并傳入本地的在對應的中添加方法再來，我們在子組件上多導入和，并添加修飾器和調用這樣就實現了我們父子組件之間的事件傳遞啦，現在我們的頁面還是正常運行，并且刪除一條數據后，頁面數據會更新。本文目錄一、項目起步二、編寫路由組件三、編寫頁面組件 1.編寫單一組件 2.模擬數據 3.編寫主從組件四、編寫服務 1.為什么需要服務 ...

BDEEFE 2019-08-23 15:25 評論0 收藏0
【CuteJavaScript】Angular6入門項目（1.構建項目和創建路由）

摘要：啟動服務，并打開新窗口可簡寫創建新組件可簡寫創建新服務創建路由模塊其他另外還有很多的命令提供，詳細可以查閱官方文檔命令。引入路由模塊導出路由模塊的指令這里需要添加一個數組，并傳入，導出讓路由器的相關指令可以在中的組件中使用。本文目錄一、項目起步二、編寫路由組件三、編寫頁面組件 1.編寫單一組件 2.模擬數據 3.編寫主從組件四、編寫服務 1.為什么需要服務 2....

bergwhite 2019-08-23 15:25 評論0 收藏0