Yes, the first thing is to add the @Injectable
decorator on each services you want to inject. In fact, the Injectable
name is a bit insidious. It doesn’t mean that the class will be “injectable” but it will decorate so the constructor parameters can be injected. See this github issue for more details: https://github.com/angular/angular/issues/4404.
Here is my understanding of the injection mechanism. When setting an @Injectable
decorator for a class, Angular will try to create or get instances for corresponding types in the injector for the current execution chain. In fact, there is not only one injector for an Angular2 application but a tree of injectors. They are implicitly associated to the whole application and components. One key feature at this level is that they are linked together in a hierarchical way. This tree of injectors maps the tree of components. No injectors are defined for “services”.
Let’s take a sample. I have the following application:
-
Component
AppComponent
: the main component of my application that is provided when creating the Angular2 application in thebootstrap
function@Component({ selector: 'my-app', template: ` <child></child> `, (...) directives: [ ChildComponent ] }) export class AppComponent { }
-
Component
ChildComponent
: a sub component that will be used within theAppComponent
component@Component({ selector: 'child', template: ` {{data | json}}<br/> <a href="#" (click)="getData()">Get data</a> `, (...) }) export class ChildComponent { constructor(service1:Service1) { this.service1 = service1; } getData() { this.data = this.service1.getData(); return false; } }
-
Two services,
Service1
andService2
:Service1
is used by theChildComponent
andService2
byService1
@Injectable() export class Service1 { constructor(service2:Service2) { this.service2 = service2; } getData() { return this.service2.getData(); } }
@Injectable() export class Service2 { getData() { return [ { message: 'message1' }, { message: 'message2' } ]; } }
Here is an overview of all these elements and there relations:
Application
|
AppComponent
|
ChildComponent
getData() --- Service1 --- Service2
In such application, we have three injectors:
- The application injector that can be configured using the second parameter of the
bootstrap
function - The
AppComponent
injector that can be configured using theproviders
attribute of this component. It can “see” elements defined in the application injector. This means if a provider isn’t found in this provider, it will be automatically look for into this parent injector. If not found in the latter, a “provider not found” error will be thrown. - The
ChildComponent
injector that will follow the same rules than theAppComponent
one. To inject elements involved in the injection chain executed forr the component, providers will be looked for first in this injector, then in theAppComponent
one and finally in the application one.
This means that when trying to inject the Service1
into the ChildComponent
constructor, Angular2 will look into the ChildComponent
injector, then into the AppComponent
one and finally into the application one.
Since Service2
needs to be injected into Service1
, the same resolution processing will be done: ChildComponent
injector, AppComponent
one and application one.
This means that both Service1
and Service2
can be specified at each level according to your needs using the providers
attribute for components and the second parameter of the bootstrap
function for the application injector.
This allows to share instances of dependencies for a set of elements:
- If you define a provider at the application level, the correspoding created instance will be shared by the whole application (all components, all services, …).
- If you define a provider at a component level, the instance will be shared by the component itself, its sub components and all the “services” involved in the dependency chain.
So it’s very powerful and you’re free to organize as you want and for your needs.
Here is the corresponding plunkr so you can play with it: https://plnkr.co/edit/PsySVcX6OKtD3A9TuAEw?p=preview.
This link from the Angular2 documentation could help you: https://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html.
Hope it helps you (and sorry the long answer),
Thierry