如何通过操作在 Angular 2 服务中注入提供者？

Question

我正在尝试在 Redux 的帮助下消除组件对 Angular 服务的依赖。

基本上，流程是Component -> Action -> Service

服务中我要使用@angular/core的http模块，建议在构造函数中传入：

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

当我从操作中调用服务时，它不会获取 http 提供程序，因为我没有 http 提供程序的实例。

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

如何将 http 提供程序注入到服务中？

Answer 1

在您的操作中，您可以在构造函数中注入 Http 并将其传递给服务实例。类似的东西

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

Answer 2

不要使用new SomeService() 创建服务实例。

而只是将类添加到bootstrap(.., [Providers]) 的提供者或应该是应该共享服务实例的范围的根的组件。

还将所有依赖项（构造函数参数）添加到提供程序列表中。

如果一切设置正确，在构造函数参数请求实例的任何地方，都会传入一个具有所有依赖关系自动解析的实例。

只需配置 DI 并让它为您完成工作。

Answer 3

事实上，您不需要自己实例化服务。只需将服务注入组件或其他服务。重要的是为此执行流程配置提供程序。在你的情况下，Http（更一般地HTTP_PROVIDERS）和SampleSampleService。提供程序是为整个应用程序（在引导级别）或组件（providers 属性）定义的。

bootstrap(AppComponent, [ HTTP_PROVIDERS, SampleService ]);

或

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

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

这是您应该用于 SampleAction 类的代码：

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

您会注意到，为了能够注入服务，需要使用 @Injectable。

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

这个答案可以为您提供更多关于使用依赖注入的方式以及分层注入器如何在 Angular2 中工作的提示：

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