Angular injectable接口

发表于 更新于 分类于 阅读次数： 本文字数： 1.6k 阅读时长 ≈ 1 分钟

1. 前言

本文将使用@Injectable 装饰器创建 Angular 服务。Angular 服务是可注入的，注入器可以将其注入到我们 Angular 应用程序中的任何组件或服务中。@Injectable 装饰器在类级别的服务中使用。@Injectable 装饰器帮助注入器考虑可注入的服务。在应用程序模块中的@NgModule 装饰器的提供者元数据中配置我们的服务后，该服务将在整个应用范围内可用。

要在组件中获取服务实例，我们需要为服务构造一个带参数的构造器, 并构造包含一系列可供组件或其他服务调用的方法。

假设我们想要创建一个购物车应用程序。在这种情况下，服务可以包含管理商店的方法、将商品添加到购物车的方法、从购物车中删除商品的方法以及查询商品的方法等。

2. 创建 Angular 服务

我们可以参照以下步骤来创建服务.

  • 第一步: 创建一个带@Injectable 装饰器的服务.
1
2
@Injectable()
export class ItemService {}

@Injectable（）装饰器是一个在类级别使用的装饰器。它告诉注入器这个类可以由注入器(Injector)创建。我们在服务类中使用@Injectable，这样就可以自动创建服务实例对象，以便在任何组件或任何其他服务类中进行依赖注入. @Injectable 还可以用来负责实例化 Angular 组件、管道、指令等。这之所以成为可能，是因为@component、@pipe 和@directive 装饰器使用@Injectable 装饰器。如果我们用@Injectable 修饰的服务类与其他服务类有依赖关系，那么我们不必担心它的创建，依赖关系注入, 这些将将由 Injector 自动执行。

  • 第二步, 在模块文件中的@NgModule 装饰器元数据中配置服务名称。
1
2
3
4
5
6
7
8
9
10
11
@NgModule({
  ----
  ----
  providers: [
        ItemService
  ],
  ----
  ----
})
export class AppModule { }

只有当我们在@NgModule 的 providers 元数据中配置服务时，组件才能使用服务。我们也可以在@Component 的提供者元数据中配置服务，但在这种情况下，该服务将仅对该组件可用。当我们在模块文件中的@NgModule 装饰器的提供者元数据中配置服务时，该服务将在应用程序中全局范围可用。

我们还可以在@Injectable 装饰器中使用 providedIn:’root’属性来使服务全局可用。

1
2
3
4
@Injectable({
  providedIn: "root",
})
export class ItemService {}
  • 第三步: 注入服务
1
2
3
4
5
6
7
@Component({
  selector: "store-app",
  templateUrl: "./store.component.html",
})
export class StoreComponent {
  constructor(private itemService: ItemService) {}
}

为了在我们的组件中获得可用的服务，我们需要在私有范围中创建一个具有我们的服务类型参数的构造函数。当加载部件时，注入器将注入服务。现在我们已经准备好调用组件中的服务方法了。在上面的代码片段中，我们的服务实例是 itemService，它将用于调用 itemService 服务的方法。

3. Angular 系列文章

最新更新以及更多 Angular 相关文章请访问 Angular 合集 | 鹏叔的技术博客

4. 参考文档

Angular Services Example using)