0Pricing
Angular Academy · 课时

提供程序与作用域

控制服务在树中的作用范围。

提供程序与作用域 是 CoddyKit 上的免费 Angular Academy 课时。 这是第 3 节课,共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Angular Academy 学习路径的一部分,你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。

提供者和作用域

提供者会告诉 Angular 如何创建依赖项。注册提供者的作用域决定存在多少个实例,以及哪些对象共享这些实例。

根作用域

providedIn: root 会将服务注册到根注入器中,为整个应用提供一个共享单例。这是最常见的选择。

@Injectable({ providedIn: 'root' })
export class AppStore {}

组件提供者

您可以将服务列在组件的 providers 数组中,从而将其限定在该组件的作用域内。该组件的每个实例都会获得服务的独立实例。

import { Component } from '@angular/core';
import { LocalStore } from './local-store';

@Component({
  selector: 'app-panel',
  providers: [LocalStore],
  template: ''
})
export class PanelComponent {}

为什么使用组件作用域

当每个组件实例都需要独立的隔离状态时,请使用组件作用域的提供者,例如表单状态对象或每个控件专用的存储。

根作用域与组件作用域

根作用域:在所有位置共享一个实例。组件作用域:每个组件实例(及其子组件)拥有一个实例。请根据状态应当共享还是隔离来选择。

注入器层级

Angular 的注入器组成一棵树。解析依赖项时,Angular 会先查找组件注入器,然后逐级向上查找父级,最后查找根注入器。

子组件会继承

在组件上提供的服务对子组件同样可用,除非子组件提供了自己的实例;子组件自己的实例会遮蔽父组件的实例。

应用级提供者

您也可以在引导时,将提供者注册到 bootstrapApplication 的 providers 数组中。这类似于根作用域,通常通过 provide* 函数完成。

// bootstrapApplication(AppComponent, {
//   providers: [provideHttpClient()]
// });

useClass 和 useValue

提供者可以使用 useClass 将令牌映射到类,使用 useValue 映射到固定值,或使用 useFactory 映射到工厂,从而支持替换和配置。

// providers: [{ provide: Logger, useClass: ConsoleLogger }]

替换实现

由于提供者会将令牌映射到实现,因此您可以替换实现(例如在测试中使用模拟实现),而无需更改使用者。

选择作用域

对于共享单例,默认使用根作用域。只有在需要隔离的每实例状态时,才使用组件提供者。

快速检查:作用域

每实例状态。

回顾:提供者和作用域

您了解到,提供者描述如何创建依赖项,而作用域控制实例化方式:根作用域用于应用范围内的单例,组件提供者用于实现每实例隔离。Angular 会沿注入器层级解析依赖项,而 useClass、useValue 和 useFactory 让您能够替换实现。接下来:注入令牌。

常见问题解答

「提供程序与作用域」课时是免费的吗?

是的 — 「提供程序与作用域」的完整文本可在网页上免费阅读。要进行交互式练习(内置代码编辑器和全天候 AI 导师)并解锁 Angular Academy 课程的其余内容,请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。

「提供程序与作用域」这节课中我会学到什么?

控制服务在树中的作用范围。 你通过在浏览器中直接运行的动手代码来练习 Angular Academy,全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Angular Academy 需要有经验吗?

无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者,你可以从这里开始或从头开始,按照自己的节奏学习。 这是第 3 节课,共 4 节。

「提供程序与作用域」课时需要多长时间?

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动,所以你能稳步进步,并在网页和应用中从离开的地方继续。

我能在这节 Angular Academy 课中编写并运行代码吗?

能。每节 Angular Academy 课都包含内置代码编辑器,你可以在浏览器中直接编写并运行真实代码,并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 服务与 Injectable
  2. inject 函数
  3. 提供程序与作用域
  4. 注入令牌
← 返回 Angular Academy