Angular 6.x 服务 (Service) 基础知识详解-JavaScript中文网-JavaScript教程资源分享门户

什么是服务？

在 Angular 应用中，服务是一种可重用的代码单元。它允许我们封装某些特定的功能，并将其提供给其他组件或服务使用，以实现代码的复用和抽象。

比如，我们创建一个用户数据服务，其中包含了从服务器请求用户数据的方法，在多个组件之间使用该服务，可以避免每个组件都需要向服务器请求用户数据，也便于对数据请求进行管理和维护。

服务的基本用法

在 Angular 中创建服务有多种方法，其中最简单和最基本的方法就是创建一个普通的 TypeScript 类，并使用 @Injectable() 装饰器为其提供服务能力：

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

@Injectable({
  providedIn: 'root'
})
export class UserService {
  getUsers() {
    // 从服务器获取用户数据
  }
}

创建后，我们就可以在其他组件、服务中使用该服务了，比如：

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

@Component({
  selector: 'app-users',
  template: '<button (click)="getUsers()">获取用户列表</button>'
})
export class UsersComponent {
  constructor(private userService: UserService) {}

  getUsers() {
    this.userService.getUsers().subscribe((users) => {
      console.log(users);
    });
  }
}

在上面的例子中，我们在组件中注入了 UserService，然后在模板中使用该服务的 getUsers() 方法来获取用户列表数据。

服务注入（DI）

在 Angular 中，服务通过依赖注入（DI）的方式实现，即将服务注入到组件或其他服务中，让它们可以使用该服务中提供的功能。

Angular 的 DI 提供了一种有效的方式来实现服务提供商（service providers）和服务消费者（service consumers）之间的松散耦合。使用 DI 可以避免硬编码、便于维护和测试、便于横向扩展等。

服务提供商可以分为以下几种类型：

根级别：在整个应用中都可以使用的服务，可以通过注入器的根注入来实现。
模块级别：在某个特定的 Angular 模块中可以使用的服务，可以在该模块的 providers 数组中添加服务提供商。
组件级别：在一个组件及其所有子组件中可以使用的服务，可以在组件的 providers 数组中添加服务提供商。

指定服务提供商的方式一般有以下几种：

通过 providedIn 属性指定服务提供商。

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

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

在模块中通过 providers 数组指定服务提供商。

import { NgModule } from '@angular/core';
import { UserService } from './user.service';

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

在组件中通过 providers 数组指定服务提供商。

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

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  providers: [
    UserService
  ]
})
export class UsersComponent {
  ...
}

单例服务

在 Angular 中，服务默认情况下是单例的，即只会创建一个服务实例，并在整个应用生命周期中共享该实例，直到应用被销毁。

对于某些需要共享和保存状态的服务（如用户登录信息、路由守卫等），可以使用单例服务来实现。

单例服务可以通过 providedIn 根注入或在 AppModule 的 providers 数组中添加 provider: [{ provide: MyService, useClass: MyService, multi: false }] 中 multi 设置为 false 来实现。

远程服务（HttpClient）

Angular 中提供了 HttpClient 类，用于向远程服务器请求数据。通过 HttpClient 可以方便地对 GET、POST 等 HTTP 请求进行处理，获取远程服务器的响应数据。

在 Angular 应用中使用 HttpClient 可以通过注入方式来获取，然后调用其 get、post、put、delete 等方法。

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="getUsers()">获取用户</button>
    <ul>
      <li *ngFor="let user of users">{{ user.name }}</li>
    </ul>
  `
})
export class AppComponent {
  users: any[] = [];

  constructor(private http: HttpClient) {}

  getUsers() {
    this.http.get('/api/users').subscribe((data: any) => {
      this.users = data;
    });
  }
}

上面的例子中，我们在组件中注入了 HttpClient，并使用该服务请求了一个用户列表接口，然后在页面中展示了该用户列表数据。

当然，在实际应用中，使用 HttpClient 还需要注意一些问题，比如错误处理、拦截器等。这部分内容可以参考官方文档进行详细学习。

总结

Angular 服务是非常重要的概念，理解和掌握服务的基本用法、注入方式、单例服务和远程服务都是我们成为一名优秀的前端开发者必不可少的技能。

服务的使用可以大大提高代码的复用性和可维护性，让我们可以专注于业务逻辑和功能实现，而不必过多关注底层实现和数据请求等细节。

本文中介绍的内容仅是 Angular 服务的基本知识，更多高级内容和实践请参考官方文档以及其他相关资料。

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