首页 >web前端 >js教程 >如何在 Angular 2 中的组件之外注入服务?

如何在 Angular 2 中的组件之外注入服务?

Patricia Arquette
Patricia Arquette原创
2024-11-26 05:25:13799浏览

How to Inject Services Outside of Components in Angular 2?

Angular 2 中的依赖注入:在组件之外注入服务

在 Angular 2 中,使用 @Component 装饰器将服务注入到组件中非常简单。但是,在某些情况下,您可能需要在组件外部注入服务。本文探讨了如何使用依赖注入 (DI) 来实现此目的。

可注入服务

要为服务启用 DI,必须使用 @Injectable 装饰器进行装饰。该装饰器将类标记为可注入,允许注入其参数。请注意,“Injectable”这个名称有点误导,因为它并不使类可注入,而是使其可注入,因为它的参数可以被注入。

依赖注入机制

Angular 2 使用分层的注入器系统,每个级别对应一个特定的组件或一组组件。当 DI 系统遇到依赖项时,它首先查找当前的注入器。如果未找到依赖项,它将向上移动注入器层次结构,直到找到依赖项的提供者。

跨注入器注入服务

将一个服务注入另一个服务服务,只需在依赖服务的构造函数中定义依赖关系,并将 @Injectable 装饰器添加到依赖服务即可。

对于示例:

@Injectable()
export class MyFirstSvc {
  // ...
}

@Injectable()
export class MySecondSvc {
  constructor(private myFirstSvc: MyFirstSvc) {
    // ...
  }
}

在此示例中,MySecondSvc 依赖于 MyFirstSvc,并且可以注入到 MyFirstSvc 可用的任何注入器中。

定义提供程序

要指定服务的提供者,请在 @Component 或 NgModule 装饰器中使用提供者数组。例如,如果您想将 MyFirstSvc 定义为应用程序注入器中的提供者,您可以按如下方式进行操作:

@Component({
  // ...
  providers: [MyFirstSvc]
})
export class AppComponent {
  // ...
}

结论

通过理解层次结构由于注入器和 @Injectable 装饰器的本质,您可以在 Angular 2 中的组件外部有效地注入服务。这使您可以创建模块化且可重用的服务在您的应用程序中轻松注入和共享。

以上是如何在 Angular 2 中的组件之外注入服务?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn