如何在 Angular 2（Beta）中的元件之外注入服務？

Angular 2（測試版）中組件外部的服務注入

了解組件之外的注入

在Angular 2（測試版）中），依賴注入使開發人員能夠在組件內無縫地傳遞服務。然而，常常需要在元件類別之外注入服務。

透過 @Injectable Decorator 注入服務

在元件之外注入服務的關鍵在於使用服務類別上的 @Injectable 裝飾器。這個裝飾器表示可以注入類別的建構子參數。

分層注入系統

Angular 2 採用映射到組件樹的分層注入器系統。服務的注入器沒有明確定義；相反，它們與元件隱式關聯。分層連結確保子注入器可以存取父注入器中定義的提供者。

範例應用程式和注入器關係

考慮以下帶有AppComponent（主元件）的範例應用程式、ChildComponent、Service1（由ChildComponent 使用）和Service2（由Service1):

<br>應用程式<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> |

登入後複製

AppComponent

 |

ChildComponent
getData() --- Service1 -- - Service2

此應用程式有三個注入器：application、AppComponent 和ChildComponent。 ChildComponent 的Service1 注入和Service1 的Service2 注入涉及以下注入器層次結構：

1. ChildComponent 注入器
2. AppComponent 注入器
3. Application

動態依賴解析

注入器根據注入器層次結構動態解析依賴關係。缺少的提供者會在父注入器中自動搜索，並級聯到應用程式註入器。

多級提供者配置

可以在每個注入器層級配置提供者（應用程序， 成分）。這允許靈活的依賴項共用：

應用程式層級提供者建立在整個應用程式中共享的實例。
• 元件層級提供者建立在元件樹和涉及的服務中共享的實例。

結論

利用@Injectable 裝飾器和了解注入器層次結構後，開發人員可以有效地在Angular 2（Beta）中的組件外部注入服務，從而實現更有效率的依賴管理和程式碼組織。

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