如何从动作中注入Angular 2服务中的提供程序？

Question

I am trying to remove the dependency of components on services in Angular with the help of Redux.

Basically, the flow is Component -> Action -> Service

In the service I want to use http module of @angular/core, which is suggested to be passed in the constructor:

export class SampleService {
    constructor(public http: Http) {}
}

And as I am calling service from action, it won't get the http provider as I do not have an instance of http provider in it.

export default class SampleAction {
    private _projectService;
    constructor() {
        this._sampleService = new SampleService();
    }
}

How can I inject the http provider into the service?

Answer 1

In your action you can inject the Http in constructor and pass it into the service instance. Something like

export default class SampleAction {
    private _projectService;
    constructor(@Inject(Http) http: Http) {
        this._sampleService = new SampleService(http);
    }    
}

Answer 2

In fact you don't need to instantiate the service by your own. Just inject the service into a component or another service. What is important is to have the provider configured for this execution flow. In your case, Http (and more generally HTTP_PROVIDERS ) and SampleSampleService . Providers are defined for the whole application (at the bootstrap level) or for component ( providers attribute).

bootstrap(AppComponent, [ HTTP_PROVIDERS, SampleService ]);

or

@Component({
  providers: [ HTTP_PROVIDERS, SampleService ]
})
export class SomeComponent {
  constructor(private action: SampleAction) {
  }

  executeAction() {
    this.action.doSomething();
  }
}

Here is the code you should use for your SampleAction class:

export default class SampleAction {
  constructor(private _projectService: SampleService) {
  }
}

You can notice that to be able to inject into a service, the @Injectable need to be used.

@Injectable()
export class SampleService {
  constructor(public http: Http) {}
}

This answer could give you more hints about the way to use dependency injection and how hierarchical injectors work in Angular2:

• What's the best way to inject one service into another in angular 2 (Beta)?

Answer 3

Don't create a service instance using new SomeService() .

Instead just add the classes to the providers of bootstrap(.., [Providers]) or the component that should be the root of the scope where a service instance should be shared.

Also add all dependencies (constructor arguments) to the providers list.

If all is set up correctly, everywhere where an instance is requested by a constructor argument, an instance with all dependencies automatically resolved is passed in.

Just configure DI and let it do the work for you.