如何将服务注入到 Angular 2 中的其他服务中？

在 Angular 2（Beta）中将服务注入到其他服务

使用 @Component 装饰器将服务注入到组件中非常简单。然而，在组件之外注入服务会带来挑战。

问题陈述

在 Angular 2 中，我们希望避免在其他服务中手动实例化服务，如以下代码片段：

export class MyFirstSvc {

}

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

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

解决方案

解决方案涉及在我们希望注入的服务上使用 @Injectable 装饰器。该装饰器为依赖注入准备服务的构造函数参数。

注入器层次结构

要理解注入的工作原理，必须掌握注入器层次结构的概念：

• 应用程序注入器：使用引导函数的第二个参数进行配置。
• 组件注入器：使用成分。它可以引用父注入器中定义的提供程序。

将服务注入组件或另一个服务时，Angular2 按以下顺序搜索提供程序：

1. 组件注入器
2. AppComponent注入器
3. 应用程序注入器

提供者共享

注入器层次结构允许受控地共享服务实例:

• 应用程序级提供程序：在整个应用程序中共享。
• 组件级提供程序：在组件内共享，其子组件及其依赖链中涉及的服务。

示例

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

在此示例中：

• Service1 依赖于 Service2。
• 在 ChildComponent 中实例化 Service1 时，Angular2 首先在 ChildComponent 注入器中搜索 Service1，然后在 AppComponent 注入器中搜索，最后在 Application 注入器中搜索 Service1。
• 同样，在 Service1 中实例化 Service2 时，Angular2 遵循相同的层次结构。
• 注入器层次结构和提供程序定位允许根据应用程序需求灵活地共享依赖项。

资源

• [Angular2 分层依赖注入指南](https://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html)
• [ Plunkr 示例](https://plnkr.co/edit/PsySVcX6OKtD3A9TuAEw?p=preview)

以上是如何将服务注入到 Angular 2 中的其他服务中？的详细内容。更多信息请关注PHP中文网其他相关文章！