Angular依赖注入中你不能错过的点

2024-02-09 23:25:48

Angular 是一个非常受欢迎的 JavaScript 框架，用于构建 web 应用程序。它使用依赖注入 (DI) 系统来管理对象之间的依赖关系。这意味着你可以轻松创建和使用对象，而无需担心它们之间的依赖关系。

在这篇文章中，我们将讨论 Angular 中的依赖注入系统，包括它的工作原理以及如何使用它。我们还将探讨一些新的依赖注入特性，这些特性可以帮助你写出更模块化和可维护的代码。

什么是依赖注入？

依赖注入是一种软件设计模式，它允许你将对象之间的依赖关系解耦。这意味着你可以轻松创建和使用对象，而无需担心它们之间的依赖关系。

在 Angular 中，依赖注入系统使用一种叫做“令牌”的东西来标识对象。令牌可以是字符串、符号或类。当你想创建一个对象时，你可以使用令牌来告诉 Angular 你想要什么对象。Angular 然后会找到并创建该对象，并将其注入到你的组件或服务中。

Angular 中的依赖注入是如何工作的？

Angular 中的依赖注入系统使用一种叫做“提供商”的东西来提供对象。提供商可以是类、函数或值。当你想提供一个对象时，你可以创建一个提供商，并告诉 Angular 你想使用什么令牌来标识该对象。

Angular 会在运行时查找提供商，并使用它们来创建对象。然后，Angular 将这些对象注入到你的组件或服务中。

如何使用 Angular 中的依赖注入？

要在 Angular 中使用依赖注入，你需要做的第一件事是创建一个提供商。你可以通过在组件或服务中使用 @Injectable() 装饰器来做到这一点。例如：

@Injectable()
export class MyService {
  constructor() { }
}

创建提供商后，你需要告诉 Angular 你想使用什么令牌来标识该对象。你可以通过在组件或服务中使用 @Inject() 装饰器来做到这一点。例如：

@Component({
  selector: 'my-component',
  template: '<div>{{myService.value}}</div>'
})
export class MyComponent {
  constructor(@Inject('MyService') private myService: MyService) { }
}

在上面的示例中，我们使用 @Inject() 装饰器来告诉 Angular 我们想使用 'MyService' 令牌来标识 MyService 对象。Angular 会在运行时查找 'MyService' 提供商，并使用它来创建 MyService 对象。然后，Angular 会将 MyService 对象注入到 MyComponent 中。