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. 配置注入器
-
@Injectable
将这个服务标记为可供注入的服务
- 要想将其注入到什么位置时,应该先配置angular 的依赖注入器(dependency injector)
-
用 provider 配置依赖注入器
在应用的不同层级配置注入器
1. 在服务本身的
@Injectable()
装饰器中。
这个配置项告诉 Angular,要由此应用的根注入器负责通过调用 HeroService 的构造函数来创建它的实例。 并让该实例在整个应用程序中可用。
image.png
除了指定给root
注入器之外,你还可以把providedIn
设置为某个特定的 NgModule。 NgModule 没有用到该服务,它就会被摇树优化掉。
2. 在 NgModule 的
image.png@NgModule
装饰器中。
你还可以在非根 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在某个注入器的范围内,服务是单例的。也就是说,在指定的注入器中最多只有某个服务的最多一个实例
补充:
- 依赖注入器的工作: a. 创建服务实例,并把他们注入到向HeroListComponent 这样的类中。
- 注入器是可继承的,这意味着如果指定的注入器无法解析某个依赖,它就会请求父注入器来解析它。 组件可以从它自己的注入器来获取服务、从其祖先组件的注入器中获取、从其父 NgModule 的注入器中获取,或从 root 注入器中获取。
网友评论