如何在Angular中创建服务？

封面图 • 2025-09-16 • Angular

在 Angular 中，**服务（Service）** 是用于封装可重用逻辑的类，通常用于数据获取、业务逻辑处理等。Angular 使用依赖注入（Dependency Injection, DI）来管理服务。

以下是创建 Angular 服务的步骤：

---

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

你可以使用 Angular CLI 快速生成一个服务：

```bash
ng generate service my-service
```

或者简写为：

```bash
ng g s my-service
```

这会生成以下文件：

- `src/app/my-service.service.ts` —— 服务的 TypeScript 文件
- `src/app/my-service.service.spec.ts` —— 服务的单元测试文件（可选）

---

## ✅ 步骤 2：编写服务逻辑

打开 `my-service.service.ts` 文件，并添加你的逻辑：

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

@Injectable({
  providedIn: 'root', // 表示该服务在根模块中提供，全局可用
})
export class MyService {
  constructor() { }

getMessage(): string {
    return 'Hello from MyService!';
  }
}
```

> 注意：`@Injectable()` 装饰器是必须的，它告诉 Angular 这个类可以被注入到其他组件或服务中。

---

## ✅ 步骤 3：在组件中使用服务

### 方法一：通过构造函数注入

在组件中导入服务并将其注入到构造函数中：

```ts
import { Component, OnInit } from '@angular/core';
import { MyService } from '../my-service.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

message: string = '';

constructor(private myService: MyService) { }

ngOnInit(): void {
    this.message = this.myService.getMessage();
  }

}
```

---

## ✅ 步骤 4：（可选）在模块中注册服务

如果你没有使用 `providedIn: 'root'`，你也可以在模块中手动注册服务：

```ts
import { NgModule } from '@angular/core';
import { MyService } from './my-service.service';

@NgModule({
  providers: [MyService]
})
export class AppModule { }
```

---

## 📌 小贴士

- **`providedIn: 'root'`** 是推荐的方式，因为它让服务在整个应用中可用，不需要在模块中手动注册。
- 如果你希望服务只在某个模块中使用，可以在该模块的 `providers` 数组中注册。
- 服务常用于封装 HTTP 请求、数据缓存、工具方法等。

---

## ✅ 示例总结

| 步骤 | 内容 |
|------|------|
| 1 | `ng g s my-service` |
| 2 | 编写服务逻辑（如获取数据、计算等） |
| 3 | 在组件中通过构造函数注入使用 |
| 4 | （可选）在模块中注册服务 |

---

如果你需要更复杂的例子（比如使用 `HttpClient` 获取数据），我也可以帮你写一个完整的示例！