Angular 服务与依赖注入：构建可维护应用的核心机制

更新: 9/4/2025字数: 0 字 时长: 0 分钟

一、服务(Service)基础概念

什么是 Angular 服务？

Angular 服务是 Angular 应用中用于封装业务逻辑、数据访问或共享功能的单例对象。它们通过依赖注入系统在整个应用中共享。

Angular 认为，组件是与用户交互的一种对象，其中的内容都应该是与用户操作有关系的，而与用户操作无关的都应该剥离出去；放在“服务对象” ，在外面为组件服务（比如日志、计时统计、数据库的访问）。

为什么需要服务？

1. 单一职责原则：将组件与业务逻辑分离
2. 代码复用：避免在多个组件中重复相同逻辑
3. 状态共享：在不同组件间共享数据和功能
4. 可测试性：更容易进行单元测试

二、创建和使用服务

1. 创建服务

使用 Angular CLI 生成服务：

ng generate service data

生成的基本服务结构：

import { Injectable } from "@angular/core";
// 所有的服务对象都是可注入的
// root 是根模块
@Injectable({ providedIn: "root" })
export class LogServe {
  doLog(log: string) {
    console.log("log service");
  }
}

2. 依赖注入

开始依赖注入：

import { Component } from "@angular/core";
import { LogServe } from "../log.service";

@Component({
  selector: "app-first",
  imports: [NgFor, NgIf, FormsModule],
  templateUrl: "./first.component.html",
  styleUrl: "./first.component.scss",
  standalone: true
})
export class FirstComponent {
  log: LogServe;
  // 1.声明依赖
  constructor(log: LogServe) {
    this.log = log;
  }
  // 2.使用依赖
  setUppercaseName(e: any) {
    this.log.doLog("1"); //  不用new
  }
}