How can I inject services into other services in Angular 2?

Injecting Services into Other Services in Angular 2 (Beta)

Injecting services into components is straightforward using the @Component decorator. However, injecting services outside of components poses a challenge.

Problem Statement

In Angular 2, we want to avoid manually instantiating services within other services, as seen in the following code snippet:

export class MyFirstSvc {

}

export class MySecondSvc {
    constructor() {
        this.helpfulService = new MyFirstSvc();
    }
}

export class MyThirdSvc {
    constructor() {
        this.helpfulService = new MyFirstSvc();
    }
}

Solution

The solution involves using the @Injectable decorator on the services that we wish to inject. This decorator prepares the constructor parameters of the service for dependency injection.

Injector Hierarchy

To understand how injection works, it's essential to grasp the concept of the injector hierarchy:

• Application Injector: Configured using the second parameter of the bootstrap function.
• Component Injector: Configured using the providers attribute of the component. It can reference providers defined in the parent injector.

When injecting a service into a component or another service, Angular2 searches for the provider in the following order:

1. Component Injector
2. AppComponent Injector
3. Application Injector

Provider Sharing

The injector hierarchy allows for controlled sharing of service instances:

• Application-level provider: Shared across the entire application.
• Component-level provider: Shared within the component, its child components, and the services involved in its dependency chain.

Example

@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' }];
  }
}

In this example:

• Service1 depends on Service2.
• When instantiating Service1 in the ChildComponent, Angular2 first searches for Service1 in the ChildComponent injector, then in the AppComponent injector, and finally in the Application injector.
• Similarly, when instantiating Service2 within Service1, Angular2 follows the same hierarchy.
• The injector hierarchy and provider positioning allow for flexible dependency sharing based on application needs.

Resources

• [Angular2 Hierarchical Dependency Injection Guide](https://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html)
• [Plunkr Example](https://plnkr.co/edit/PsySVcX6OKtD3A9TuAEw?p=preview)

The above is the detailed content of How can I inject services into other services in Angular 2?. For more information, please follow other related articles on the PHP Chinese website!