17 服务与依赖注入之注入服务

在前面的章节中，我们探讨了如何创建 Angular 服务。现在，我们将深入了解如何在组件中注入这些服务。依赖注入是 Angular 的核心特性之一，允许组件和服务之间的解耦，使得代码更加模块化和易于测试。

理解依赖注入

依赖注入（Dependency Injection, DI）是一种设计模式，它允许我们在需要的地方获取所需的依赖项，而不是在依赖项内部自己创建。这样可以增强代码的可维护性和可测试性。在 Angular 中，依赖注入的实现是通过 Injector 服务进行的。

如何注入服务

在 Angular 中，你可以通过在构造函数中声明服务的类型来注入服务。以下是一个简单的例子，展示了如何在组件中注入服务。

创建一个简单服务

假设我们之前创建了一个名为 DataService 的服务，它可以提供一些数据。首先，让我们定义这个服务：

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

@Injectable({
  providedIn: 'root'  // 使服务在应用的根级别可用
})
export class DataService {
  private data: string[] = ['Angular', 'React', 'Vue'];

  getData(): string[] {
    return this.data;
  }
}

注入服务到组件

接下来，我们将在一个名为 AppComponent 的组件中注入这个 DataService。以下是如何进行注入的示例：

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

@Component({
  selector: 'app-root',
  template: `
    <h1>欢迎来到我的应用</h1>
    <ul>
      <li *ngFor="let item of data">{{ item }}</li>
    </ul>
  `
})
export class AppComponent implements OnInit {
  data: string[];

  constructor(private dataService: DataService) {}

  ngOnInit(): void {
    this.data = this.dataService.getData();  // 使用服务提供的数据
  }
}

在上面的代码中，我们通过 private dataService: DataService 在构造函数中注入了服务。然后，在 ngOnInit 生命周期钩子中，我们调用 dataService.getData() 来获取数据，并将其保存在组件的 data 属性中。

使用服务的方法

在组件中使用服务后，接下来我们可以通过 Angular 提供的内置机制（如 Service）来管理和使用服务内的数据。这里我们添加一个方法，以便在组件中更新数据：

updateData(newData: string): void {
  this.dataService.addData(newData); // 假设 DataService 有 addData 方法
  this.data = this.dataService.getData(); // 重新获取更新后的数据
}

这样的实现方式使得我们能够在需要的时候更新服务内的数据，而不需要在组件中直接修改数据，保证了数据的一致性。

总结

本章我们学习了如何在 Angular 组件中注入服务。这一过程极大地增强了模块化和服务的复用性。在下一章中，我们将集中讨论如何使用 Angular 提供的 HttpClient 服务与外部 API 进行交互，了解更多关于服务与依赖注入的强大功能。对于任何想要实现复杂功能的 Angular 应用，熟悉依赖注入机制是至关重要的。

让我们为下一个主题做好准备，探索如何在服务中使用 HTTP API。