Angular 中使用自定义服务的详细教程-JavaScript中文网-JavaScript教程资源分享门户

在 Angular 中，一个服务是一个可注入的类，用于处理特定的任务并且在组件之间共享数据和功能。使用服务可以让你将代码编写得更清晰和可重用，同时也可以实现更高效的代码组织和代码管理。

本文将详细介绍如何在 Angular 中使用自定义服务，包括服务的创建、注入和使用以及如何将服务用于组件之间的通信。

创建服务

创建一个Angular服务需要定义一个类，该类需要使用 @Injectable() 装饰器进行注释。如果我们想在其他组件中使用该服务，我们需要将服务注册到 Angular 依赖注入系统中。在创建服务之前，请确保您的应用程序已经安装 Angular CLI。

以下是一个示例服务类：

// javascriptcn.com 代码示例
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private data: any[] = [];

  constructor() { }

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

  setData(data: any[]): void {
    this.data = data;
  }
}

在服务类中，我们定义了一个名为 DataService 的类并使用 @Injectable({ providedIn: 'root' }) 装饰器注册服务。在 DataService 中，我们有两个方法：getData() 和 setData(data: any[])，分别用于获取和设置服务中的数据。

在类中使用 @Injectable({ providedIn: 'root' }) 装饰器表示将服务提供给应用程序的根注入器。这使得服务可用于整个应用程序，包括所有 Angular 组件。如果您希望只在一个组件或一组组件中使用服务，请将这个服务的提供者加入这个组件的 providers 数组中。

注入服务

在 Angular 中，要在组件类中使用服务，我们需要先将服务注入（通过依赖注入）到组件类的构造函数中。要注入 DataService，可以使用 constructor 方法来实现：

// javascriptcn.com 代码示例
import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-example',
  template: `
    <button (click)="getData()">Get Data</button>
    <button (click)="setData()">Set Data</button>
  `,
  providers: [DataService]
})
export class ExampleComponent {
  constructor(private dataService: DataService) { }

  getData(): void {
    console.log(this.dataService.getData());
  }

  setData(): void {
    this.dataService.setData(['foo', 'bar', 'baz']);
  }
}

在上面的示例中，我们将 DataService 服务注入到 ExampleComponent 组件中。在构造函数中，我们将 DataService 服务声明为 private，这意味着我们只能在 ExampleComponent 类中使用它。

在组件中通过注入服务可以使用服务的公共方法和属性。

将服务用于组件之间的通信

服务作为单一的实例在组件之间共享，并且它们在应用程序中可以用于许多用途之一就是通过共享数据将组件连接在一起。

以下是一个示例，演示了如何使用服务来共享数据：

// javascriptcn.com 代码示例
import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-user',
  template: `
    <h2>User Component</h2>
    <input [(ngModel)]="userData">
    <button (click)="updateData()">Update Data</button>
  `,
  providers: [DataService]
})
export class UserComponent {
  public userData: string;

  constructor(private dataService: DataService) { }

  updateData(): void {
    this.dataService.setData(this.userData);
  }
}

在上面的示例中，我们创建了一个名为 UserComponent 的组件，并注入了 DataService 服务。在组件中，我们有一个 userData 公共属性，用于存储用户输入的数据。

当用户点击“Update Data”按钮时，我们将 userData 发送到 DataService 中的 setData() 方法中。这意味着任何使用 getData() 方法的组件都可以访问该数据。

下面的组件示例显示了如何从服务中获取数据：

// javascriptcn.com 代码示例
import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-display',
  template: `
    <h2>Display Component</h2>
    <p>{{ data }}</p>
  `,
  providers: [DataService]
})
export class DisplayComponent {
  public data: any[];

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.data = this.dataService.getData();
  }
}

在上述示例中，我们创建了一个名为 DisplayComponent 的组件，并注入了 DataService 服务。在组件中，我们有一个 data 属性，用于存储从 DataService 中获取的数据。

在 ngOnInit() 生命周期钩子中，我们调用 getData() 方法从服务中获取数据，并将数据设置为组件的 data 属性。该数据可以用来在页面上显示。

总结

自定义服务是 Angular 中一个非常强大的功能，它们可以被用来提供组件之间的通信、共享数据或进行任何其他类型的工作。

本文通过一个 Angular 示例服务来帮助您使用自定义服务。请记住，要使用自定义服务，我们需要首先定义服务并将其注入到组件中。通常情况下，服务被注册到 Angular 根注入器中，以便它可以在整个应用程序中使用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652e26b57d4982a6ebf34042