服务service

1. 创建服务

ng g service example.ts

得到如下文件结构：

》 src/app/folder/example.ts
import  { Injectable } from '@angular/core';
import { Heroes } from './mock-heroes';
@Injectable({
provideIn: 'root'，  // we  declare  that this service shoulde be created by the root application injector.
})
export  class ExampleService {
getExample() {
return  Heroes;
}
}

2. 配置注入器

1. @Injectable 将这个服务标记为可供注入的服务

---

2. 要想将其注入到什么位置时，应该先配置angular 的依赖注入器（dependency injector）

---

3. 用 provider 配置依赖注入器

   在应用的不同层级配置注入器

   1. 在服务本身的 @Injectable() 装饰器中。

image.png

这个配置项告诉 Angular，要由此应用的根注入器负责通过调用 HeroService 的构造函数来创建它的实例。 并让该实例在整个应用程序中可用。
除了指定给 root 注入器之外，你还可以把 providedIn 设置为某个特定的 NgModule。 NgModule 没有用到该服务，它就会被摇树优化掉。

image.png

2. 在 NgModule 的 @NgModule装饰器中。

image.png
你还可以在非根 NgModule 元数据的 providers 选项中配置一个模块级的提供商，以便把该服务的范围限定在该模块一级。 这和在 @[Injectable](https://angular.cn/api/core/Injectable)() 元数据中指定一个非根模块是基本等效的，但以 providers 形式提供的服务无法被摇树优化。
一般来说，你不必在 providedIn 中指定 AppModule，因为应用中的 root 注入器就是 AppModule 注入器。 不过，如果你在 AppModule 的 @NgModule() 元数据中配置了全应用级的提供商，它就会覆盖通过 @Injectable() 配置的那一个。

3. 在组件的 @Component() 装饰器中。

每个组件都有它自己的注入器。 通过使用 @Component 元数据 providers 在组件级配置某个提供商，你可以把这个提供商的范围限定到该组件及其子组件。你可以把这个提供商的范围限定到该组件及其子组件。

image.png
服务文件里@Injectable() 装饰器具有一个名叫 providedIn 的元数据选项
@NgModule() 和 @Component() 装饰器都有用一个 providers 元数据选项

---

3. 注入服务

image.png

在某个注入器的范围内，服务是单例的。也就是说，在指定的注入器中最多只有某个服务的最多一个实例

补充：

1. 依赖注入器的工作： a. 创建服务实例，并把他们注入到向HeroListComponent 这样的类中。
2. 注入器是可继承的，这意味着如果指定的注入器无法解析某个依赖，它就会请求父注入器来解析它。 组件可以从它自己的注入器来获取服务、从其祖先组件的注入器中获取、从其父 NgModule 的注入器中获取，或从 root 注入器中获取。