Angular 服务

服务的概念

服务是在多个“互相不知道”的类之间共享信息的好办法。—— 官方文档

可以理解为组件中需要的数据源是由服务提供的，也可以理解为组件类中的方法通过调用服务中的方法向服务器请求数据。

@Injectable() 服务

服务类需要导入Injectable符号并需要加上Injectable()装饰器。

Injectable()装饰器的作用是把这个类标记为依赖注入系统的参与者之一，它会接受该服务的元数据对象，就像@Component对组件类的作用一样。

提供服务的方式

在要求Angular把Service注入到Component之前，必须先把这个服务提供给依赖注入系统，可以通过注册提供商来做到这一点。提供商用来创建和交付服务。

要注册提供商，就要在服务的 @Injectable() 装饰器中提供它的元数据，或者在@NgModule() 或 @Component() 的元数据中。

提供商提供服务的方式主要有以下几种：

第一种：为整个应用注册提供商
在应用的根注入器中添加服务提供商，该服务在整个应用程序中可用。(首选方式)

@Injectable({providedIn: 'root',
})
export class XXXService {
}

注：将服务提供商注入到根注入器中后，这些服务提供商对整个应用中的类都是可用的，不需要再在相应Module中重新注册。

第二种：为某个特定的NgModule注册提供商
规定某个服务只在特定的 @NgModule 中提供。

import { Injectable } from '@angular/core';
import { UserModule } from './user.module';@Injectable({providedIn: UserModule, //把UserService注入到UserModule中
})
export class UserService {
}

import { NgModule } from '@angular/core';import { UserService } from './user.service';@NgModule({providers: [UserService], // 把UserService注入到本模块中
})
export class UserModule {
}

第三种：为组件注册提供商
在组件级注册服务提供商时，会为该组件的每一个新实例提供该服务的一个新实例。要在组件级注册，就要在 @Component() 元数据的 providers 属性中注册服务提供商。

@Component({selector: 'app-hero-list',templateUrl: './hero-list.component.html',providers:  [ XxxxService ]
})

注入服务

在 Component 的构造方法中添加服务对象的实例

constructor(private xxxService: XXXService) {}

这个参数同时做了两件事：

第一，声明了一个私有 xxxService 属性。
第二，把它标记为一个 XXXService 的注入点。

当 Angular 创建 Component 时，依赖注入系统就会把这个 xxxService 参数设置为 XXXService 的单例对象。

服务中的方法

在实际应用中，服务与远程服务器进行通讯，属于异步操作。

服务中的方法必须具有某种形式的异步函数签名，可以使用回调函数，可以返回Promise(承诺)，也可以返回Observable(可观察对象)。

在实际使用中，我们会使用HttpClient方法与远程服务器进行通讯，所有HttpClient方法都会返回Observable。

跳转：Angular Http

—— END ——

Angular 服务相关推荐

angluar ajax实例,Angular服务Request异步请求的实例讲解
首先这里我简单写个例子来方便您的理解 var request = { post: function() { var errorCallback = { error: function(f) { thi ...
idea 编写scala_在Scala中编写Angular服务
idea 编写scala Those following my blog posts know that I like to take Scala everywhere. This time, let ...
angular服务一
angular服务 [$apply()] jquery内数据绑定要用$apply(),不然不能在js内通过angular绑定数据 <!DOCTYPE html> <html lan ...
Angular服务http post传递key-value 到Springmvc控制器
1 在angular使用http服务时候,我们通常是这样的,这样会param 放到body 里面去 var param = {id:flyid}return $http({method: 'post' ...
Angular 服务端渲染(SSR) 学习笔记
文章目录 1 服务器端渲染 (SSR) 2 SSR的利弊 2.1 SSR的优势 2.2 SSR的局限 3 Angular Universal 3.1 Node.js Express web serve ...
Angular 服务端渲染 Angular Universal 实例
标准的 Angular 应用运行在浏览器中,它会在 DOM 中渲染页面,以响应用户的操作. 而Angular Universal 会在服务端运行,生成一些静态的应用页面,稍后再通过客户端进行启动. 这 ...
Angular 服务的创建及使用
在网页开发中,我们在必要时需要在多个组件之间进行通用数据.就好比vuex.Redux.Dva一样,那么在Angular中,它也有自己的独特的数据状态管理,那就是服务 service ! 服务的创建: ...
关于 Angular 服务实例作用域的问题 - 使用组件限定服务提供者的作用域
官方链接一种限定提供者作用域的方式是把要限定的服务添加到组件的 providers 数组中.组件中的提供者和 NgModule 中的提供者是彼此独立的. 当你要急性加载一个自带了全部所需服务的模块时 ...
对具有外部依赖的Angular服务类(service class)进行单元测试的几种方式
两个service的源代码: import { Injectable } from '@angular/core';@Injectable() export class MasterService { ...