依賴注入如何在 Angular 2 元件之外運作？

在Angular 2 (Beta) 中註入服務

在Angular 2 中，將服務注入到組件中很簡單，但是我們如何利用依賴注入（DI）將服務傳輸到元件之外？

在元件之外注入服務

為了實現這一點，我們使用 @Injectable 裝飾器註解所需的服務。這個裝飾器表示被註解的類別的建構函數中的參數應該接收注入。

理解注入機制

Angular 2 中的 DI 機制在樹上運行噴射器以分層結構連結。這些注入器映射到元件樹上，但沒有特定的服務注入器。

當服務使用 @Injectable 註解時，Angular 會嘗試在目前的注入器中建立或擷取該服務類型的實例。執行鏈。

範例：服務注入鏈

考慮以下範例應用程式：

• AppComponent（主要元件）
• AppComponent（主要元件）
• Service1（由ChildComponent 使用）

Service2（由Service1 使用）

每個服務和元件都用@Injectable 註解。

注入器層次結構和服務注入

• 在此應用程式中，我們有三個注入器：
• 應用程式註入器（在引導期間配置）
AppComponent 注入器（透過其providers 屬性配置）

ChildComponent 注入器（類似配置）

將Service1 注入Angular 首先在ChildComponent 注入器中搜尋Service1 提供者，然後在AppComponent 注入器中，最後在應用程式註入器中。

同樣，當 Service2 注入 Service1 時，會發生相同的搜尋過程。

Provider 範圍和 Injector 層次結構

• 此搜尋程序決定在何處實例化和共用服務實例。可以在不同層級指定提供者：
• 應用程式層級：實例在整個應用程式中共用。

元件層級：實例在元件、其子元件和依賴服務內共用。

結論

透過利用@Injectable 裝飾器並了解Angular 2 中的DI 機制，我們可以有效地在組件和服務之間注入服務，從而使我們能夠根據需要組織和共享依賴項。

以上是依賴注入如何在 Angular 2 元件之外運作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！