通过构建应用程序了解 Angular 依赖注入-五八三

通过构建应用程序了解 Angular 依赖注入

作为一名 Angular 开发人员，了解依赖注入的概念对于构建可扩展和可维护的应用程序至关重要。Dependency Injection 是软件工程中的一种设计模式，允许将依赖项传递给对象，而不是在对象内部实例化。这有助于减少代码中的紧耦合，并允许更好的可扩展性和可维护性。在本文中，我们将通过构建应用程序深入了解 Angular 依赖注入的世界。

Angular 中的依赖注入是什么？

在 Angular 中，依赖项是组件或服务正常运行所依赖的对象或服务。要使用这些依赖项，我们需要在代码中创建它们的实例。这可能会导致诸如紧耦合、硬编码和代码重复等问题。

Angular 的依赖注入允许我们通过在运行时而不是编译时创建依赖实例来避免这些问题。这意味着 Angular 将创建所需服务的实例，并根据需要将它们传递给组件。

因此，我们可以使用 Angular 的依赖注入来定义它一次，然后在全局使用它，而不是在每个组件或服务中定义服务实例。这促进了更好、更清晰的代码组织。

它是如何工作的？

要了解 Angular 依赖注入的工作原理，我们需要了解 Angular 服务、提供者和注入的基本概念。

角度服务

Angular 服务是用于在组件之间共享数据或功能的对象或函数。它们可以注入组件并用于执行某些任务，例如从 API 获取数据。

Angular 中的服务是一个单例实例，这意味着它创建一次并在整个应用程序中使用。

这是一个简单服务的示例：




import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  users = ['John', 'Jane', 'Sam'];

  constructor() { }

  getUsers() {
    return this.users;
  }

  addUser(user: string) {
    this.users.push(user);
  }
}

在这个例子中，我们定义了一个名为“UserService”的服务，它有一个用户列表和两个方法，getUsers() 和 addUser()。为了使这个服务对应用程序或组件可用，我们需要将它包含在 Angular 的依赖注入中。

供应商

在 Angular 中，提供者是用于向应用程序提供某种类型服务的对象。Provider可以在组件中定义，也可以在模块中注册。

Angular 使用提供者将服务与请求它的模块或组件相关联。Provider 可以是服务、对象或返回值的工厂函数。

以下是如何将服务注册为提供者的示例：




import { NgModule } from '@angular/core';
import { UserService } from './user.service';


@NgModule({
  imports: [],
  exports: [],
  declarations: [],
  providers: [UserService]
})
export class AppModule { }

在此示例中，我们将 UserService 注册为 AppModule 中的 Provider。当我们这样做时，Angular 将创建 UserService 的单个实例并使其在整个应用程序中可用。

Injectors

Injectors是负责创建和注入依赖项的对象。我们需要为注入器提供一组关于如何创建和注入依赖项的说明。这些说明以提供者的形式出现。

在 App Module 中，我们可以为服务定义一个提供者，而 Angular 的 Injector 将负责其他一切。它将创建一个服务实例，然后将其注入到需要它的组件中。

组件中的依赖注入

要在 Angular 组件中使用服务，我们需要使用构造函数注入它。这是一个例子：




import { Component } from '@angular/core';
import { UserService } from './user.service';


@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.scss']
})
export class UsersComponent {
  users = [];

  constructor(private userService: UserService) { }

  ngOnInit() {
    this.users = this.userService.getUsers();
  }

}

在这个例子中，我们在 UsersComponent 的构造函数中注入了 UserService。然后我们将服务返回的数据存储在用户变量中。