Angular Academy · 课时

inject 函数

Q: 「inject 函数」这节课中我会学到什么？

使用 inject 函数解析依赖项。 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 inject 函数解析依赖项。

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

inject 函数

inject() 函数从注入器中获取依赖项。这是构造函数参数注入的现代替代方式。

基本用法

使用所需的类调用 inject，并将返回结果赋给一个字段。

import { Component, inject } from '@angular/core';
import { DataService } from './data.service';

@Component({ selector: 'app-x', template: '' })
export class XComponent {
  private data = inject(DataService);
}

与构造函数注入的比较

较旧的写法会将依赖项声明为构造函数参数。inject() 通过字段初始化器完成相同的工作，通常更加简洁。

// old style:
// constructor(private data: DataService) {}

可以调用 inject 的位置

inject() 必须在注入上下文中运行：例如在组件、指令或服务的构造过程中，或者在字段初始化器和提供者工厂函数中运行。

在服务中注入

您也可以在服务中使用 inject，例如获取 HttpClient。

import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class Api {
  private http = inject(HttpClient);
}

减少样板代码

使用 inject 可以避免冗长的构造函数签名。每个依赖项都是一个简单的字段声明，易于阅读和调整顺序。

使用已注入的服务

注入服务后，您可以像使用任何对象一样调用它。

export class XComponent {
  private store = inject(CounterStore);
  add() { this.store.increment(); }
}

在函数式守卫中使用 inject

函数式路由守卫和解析器会在注入上下文中运行，因此您可以在其中调用 inject 来访问服务。

// export const authGuard = () => {
//   const auth = inject(AuthService);
//   return auth.isLoggedIn();
// };

可选依赖项

inject 接受选项，例如将依赖项标记为可选，这样在未提供依赖项时会返回 null，而不是抛出错误。

// const logger = inject(Logger, { optional: true });

注入上下文之外

在注入上下文之外调用 inject（例如在 setTimeout 回调中）会抛出错误。请改为在构造过程中获取并保存依赖项。

为什么优先使用 inject

inject 很适合与混入、基类和函数式 API 配合使用，还能让组件类保持简洁。在现代 Angular 中，这是推荐的方式。

快速检查：inject

获取依赖项。

回顾：inject

您学习了作为现代依赖项获取方式的 inject() 函数，它可以在注入上下文中的组件、服务和函数式守卫内使用。与构造函数注入相比，它能减少样板代码，并支持 optional 等选项。接下来：提供者和作用域。

常见问题解答

「inject 函数」课时是免费的吗？

是的 — 「inject 函数」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。

「inject 函数」这节课中我会学到什么？

使用 inject 函数解析依赖项。你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Angular Academy 需要有经验吗？

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

「inject 函数」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Angular Academy