如何在Angular中使用服务和依赖注入

在Angular中，服务和依赖注入是实现代码模块化和复用的关键机制。服务在Angular中定义可重用的业务逻辑或数据访问层，依赖注入则是一种设计模式，用于让组件类不必负责创建所需服务的实例，而是通过构造函数（constructor）接收这些服务作为参数。具体来说，Angular中的依赖注入系统提供了一个强大、维护简单的方法来管理组件和服务之间的关系。

一、创建服务

在Angular中，服务是一个用 @Injectable() 装饰器标记的类。它可以在多个组件之间共享，封装了一些独立的功能或业务逻辑。你可以使用Angular的CLI命令 ng generate service [service-name] 快速创建服务。

创建一个服务时必须声明 @Injectable() 装饰器，它告诉Angular这个类可以作为一个服务被注入到其他类中。装饰器中的 providedIn 属性指定了该服务的提供方式，通常设置为 'root'，这意味着该服务是单例，并且在整个应用中可用。

创建示例服务

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class ExampleService {
  constructor() { }
  getExampleData() {
    return 'This is example data from the service.';
  }
}

二、注册服务

服务注册通常在两个地方完成：模块的 providers 数组或使用 @Injectable() 装饰器的 providedIn 属性。

在模块的 providers 数组中注册服务

在某些情况下，你可能希望将服务的范围限制在特定模块中。在这种情况下，你可以在NgModule装饰器的 providers 数组中注册服务：

import { NgModule } from '@angular/core';
import { ExampleService } from './example.service';
@NgModule({
  providers: [ExampleService]
})
export class ApPMOdule { }

使用 providedIn 注册服务

当你希望服务成为单例，且全应用范围内都能使用时，可以在 @Injectable() 装饰器中使用 providedIn 属性：

@Injectable({
  providedIn: 'root'
})
export class ExampleService {
  // ...
}

三、注入服务

依赖注入是Angular管理服务和组件之间依赖关系的机制。当组件需要某个服务的时候，Angular会查找和构造一个服务的实例，并通过组件的构造函数将其注入到组件中。

在组件中注入服务

组件通过构造函数参数的方式来接收被注入的服务：

import { Component } from '@angular/core';
import { ExampleService } from './example.service';
@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  constructor(private exampleService: ExampleService) { }
  getExampleData() {
    return this.exampleService.getExampleData();
  }
}

构造函数参数exampleService声明了一个私有成员变量，同时也是告诉Angular需要将ExampleService服务注入到ExampleComponent组件中。

四、利用服务共享数据

服务在组件之间共享数据的能力非常重要。通过在服务中定义数据和操作数据的方法，然后在不同的组件中注入这个服务，可以确保组件间数据的一致性。

示例：使用服务共享数据

@Injectable({
  providedIn: 'root'
})
export class SharedDataService {
  private data: any[] = [];
  addData(item: any) {
    this.data.push(item);
  }
  getData(): any[] {
    return this.data;
  }
}

不同的组件可以注入SharedDataService服务来访问和修改共享数据。

在组件 A 中使用服务

@Component({
  // ...
})
export class ComponentA {
  constructor(private sharedDataService: SharedDataService) { }
  addItem(item: any) {
    this.sharedDataService.addData(item);
  }
}

在组件 B 中使用服务

@Component({
  // ...
})
export class ComponentB {
  constructor(private sharedDataService: SharedDataService) { }
  getItems() {
    return this.sharedDataService.getData();
  }
}

通过这种方式，ComponentA 和 ComponentB 可以共享和操作同一组数据。