在 Angular 中的完整依赖注入-JavaScript中文网-JavaScript教程资源分享门户

依赖注入是一种设计模式，它通过将依赖项传递给对象，来降低对象之间的耦合性。在 Angular 中，依赖注入是一个核心概念，它使得我们可以更好地管理组件之间的关系。

Angular 中的依赖注入

在 Angular 中，依赖注入是通过注入器实现的。注入器是一个特殊的对象，它负责创建和管理依赖项。当我们需要使用一个依赖项时，我们可以向注入器请求该依赖项，注入器则会负责创建该依赖项并返回给我们。

在 Angular 中，注入器是层次化的。每个组件都有一个注入器，它可以访问所有父级注入器中的服务。这意味着，我们可以在组件之间共享服务，而不必在每个组件中都创建一个新的服务实例。

如何使用依赖注入

在 Angular 中，我们可以通过构造函数来声明依赖项。当我们创建一个组件时，Angular 会自动查找该组件的构造函数，并将构造函数中声明的依赖项注入到组件中。

例如，我们有一个名为 UserService 的服务，我们可以在组件中这样使用它：

// javascriptcn.com 代码示例
import { Component } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-root',
  template: '<h1>Hello {{user.name}}!</h1>',
})
export class AppComponent {
  constructor(private userService: UserService) {}

  get user() {
    return this.userService.getUser();
  }
}

在上面的代码中，我们在组件的构造函数中声明了一个名为 userService 的依赖项，并将其标记为 private。这意味着，我们可以在组件的其他方法中访问 userService，但是在组件之外是无法访问它的。

如何创建服务

在 Angular 中，服务是一个普通的 TypeScript 类，它可以被注入到组件中使用。要创建一个服务，我们可以使用 @Injectable 装饰器来标记该类。这告诉 Angular，该类是可注入的，并且可以由注入器创建和管理。

例如，我们有一个名为 UserService 的服务，我们可以这样创建它：

// javascriptcn.com 代码示例
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class UserService {
  private user = { name: 'John' };

  getUser() {
    return this.user;
  }
}

在上面的代码中，我们使用 @Injectable 装饰器来标记 UserService 类，并通过 providedIn 选项将其注册为根级别的服务。这意味着，该服务将在应用程序启动时被创建，并在整个应用程序中都可用。

总结

依赖注入是 Angular 中的一个核心概念，它使我们能够更好地管理组件之间的关系。在 Angular 中，我们可以通过注入器来实现依赖注入。每个组件都有一个注入器，它可以访问所有父级注入器中的服务。要使用依赖注入，我们可以在组件的构造函数中声明依赖项，并使用 @Injectable 装饰器来创建服务。

希望本文能够对您理解 Angular 中的依赖注入有所帮助。如果您有任何问题或建议，请在评论区留言。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6578cd96d2f5e1655d2b452f