How Can You Inject Services Outside of Components in Angular 2 (Beta)?

Service Injection Outside of Components in Angular 2 (Beta)

Understanding Injection Beyond Components

In Angular 2 (Beta), dependency injection enables developers to pass around services seamlessly within components. However, it is often necessary to inject services outside of component classes.

Injecting Services via @Injectable Decorator

The key to injecting services outside of components lies in using the @Injectable decorator on the service class. This decorator signifies that the constructor parameters of the class can be injected.

Hierarchical Injection System

Angular 2 employs a hierarchical injector system that maps to the component tree. Injectors for services are not explicitly defined; instead, they are implicitly associated with components. Hierarchical linking ensures that child injectors have access to providers defined in parent injectors.

Sample Application and Injector Relationships

Consider the following sample application with an AppComponent (main component), ChildComponent, Service1 (used by ChildComponent), and Service2 (used by Service1):

<br>Application</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> |

Copy after login

Copy after login