16 服务与依赖注入 - 创建服务

在本章中，我们将继续探索 Angular 框架的核心概念之一——服务与依赖注入。服务是 Angular 应用程序中可重用的代码块，通常用于封装业务逻辑和数据访问。通过将这些逻辑提取到服务中，我们的组件将变得更加简洁且关注于用户界面，遵循了“关注分离”的原则。

什么是服务？

服务是一个简单的 JavaScript 对象，通常用来封装一些逻辑或功能，以便可以在应用的多个组件之间共享。例如，我们可以创建一个用户服务，该服务可以处理用户数据的获取、存储和管理。

创建一个服务

在 Angular 中，我们可以使用 Angular CLI 来创建服务。以下是具体步骤：

步骤 1：使用 Angular CLI 创建服务

在终端中，运行以下命令：

ng generate service user

此命令将创建一个新服务 UserService，并会在项目中生成两个文件：

• user.service.ts - 服务本身的实现
• user.service.spec.ts - 服务的单元测试文件

步骤 2：实现服务逻辑

接下来，我们在 user.service.ts 文件中实现一些基本功能。例如，我们可以添加一个方法来获取用户信息。

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

@Injectable({
  providedIn: 'root', // 这使得服务在根模块中可用
})
export class UserService {
  private users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
  ];

  constructor() {}

  getUsers() {
    return this.users;
  }

  getUserById(id: number) {
    return this.users.find(user => user.id === id);
  }
}

在上面的代码中，我们创建了一个名为 UserService 的服务，并定义了两个方法：getUsers() 和 getUserById(id: number)。这些方法分别返回用户列表和根据用户 ID 获取单个用户。

步骤 3：使用服务

在我们之前的组件中，我们可以通过注入 UserService 来使用它。在组件中，我们需要进行以下修改：

1. 导入 UserService。
2. 在构造函数中注入服务。
3. 在组件中调用服务的方法。

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

@Component({
  selector: 'app-user-list',
  template: `
    <h2>User List</h2>
    <ul>
      <li *ngFor="let user of users">
        {{ user.name }}
      </li>
    </ul>
  `,
})
export class UserListComponent implements OnInit {
  users: any[] = [];

  constructor(private userService: UserService) {}

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

在此代码中，我们创建了一个名为 UserListComponent 的组件。在 ngOnInit 生命周期钩子中，我们调用 UserService 的 getUsers() 方法，并将其结果赋值给组件的 users 属性，以便在模板中展示。

小结

在本章中，我们学习了如何创建 Angular 服务并在组件中使用它。通过服务，我们可以更好地组织代码，复用逻辑，并保持组件的简洁。

在接下来的章节中，我们将深入了解依赖注入的更多内容，学习如何将服务注入到其他服务和组件中。通过这些知识的结合，我们将能够构建出更加模块化和可维护的 Angular 应用程序。

如果你对路由中的参数有其他疑问，可以回顾第五章，进一步思考如何将路由与服务结合使用。下章我们将进入更深的依赖注入概念，欢迎继续学习！