Angular学习笔记9：服务（Service）（2）

阳光穿透心脏的1/2处 2022-05-08 07:34 255阅读 0赞

# 可观察的对象（observable）的数据 #

`在现在的是情况下：HeroService.getHeroes()` 的函数签名是*同步的*，它所隐含的假设是 `HeroService` 总是能同步获取英雄列表数据。 而 `HeroesComponent` 也同样假设能**同步**取到 `getHeroes()` 的结果。**但是在实际的项目中，这种情况几乎是不可能实现的，因为，在实际的项目中，这些数据是来源于远端的服务器上，而这个过程始终是一个异步的过程。**

在实际的项目中：`HeroService` 必须等服务器给出响应， 而 `getHeroes()` 不能立即返回英雄数据， 浏览器也不会在该服务等待期间停止响应。`HeroService.getHeroes()` 必须具有某种形式的**异步函数签名**。它可以使用回调函数，可以返回 `Promise`（承诺），也可以返回 `Observable`（可观察对象）。

## 一. 重新写一个可观察对象版本的 `HeroService` ##

**`Observable简介：Observable` 是 RxJS中的一个关键类。**

### **重写** ###

### 1.打开 `HeroService` 文件，并从 RxJS 中导入 `Observable` 和 `of` 符号。 ###

import { Observable, of } from 'rxjs';

### 2. 修改`getHeroes` 方法： ###

1.  `getHeroes(): Observable<Hero[]> {`
2.  `return of(HEROES);`
3.  `}`

注意：`of(HEROES)` 会返回一个 `Observable<Hero[]>`，它会发出单个值，这个值就是这些模拟英雄的数组。

### 3.在 `HeroesComponent` 中订阅  ###

之前的`HeroService.getHeroes` 方法返回的是一个 `Hero[]`， 现在它返回的是 `Observable<Hero[]>`。所以现在必须在 `HeroesComponent` 中也向本服务中的这种Observable形式变化。

**修改getHeroes()：**

1.  `getHeroes(): void {`
2.  `this.heroService.getHeroes()`
3.  `.subscribe(heroes => this.heroes = heroes);`
4.  `}`

`Observable.subscribe()` 是关键的差异点。

两个版本的差别：

第一个版本：

hero的数组赋值给了该组件的 `heroes` 属性。 这种赋值是**同步的**，这里包含的假设是服务器能立即返回hero数组或者浏览器能在等待服务器响应时冻结界面，使其等到后端的数据返回以后，界面在再次解冻。

第二个版本：

`应用会等待Observable` 发出这个hero数组，这种请求可能立即发生，也可能会在几分钟之后。 然后，`subscribe` 函数把这个hero数组传给这个回调函数，该函数把hero数组赋值给组件的 `heroes` 属性。使用这种异步方式，当 `HeroService` 从远端服务器获取hero数据时，应用就可以工作了。（此过程可以想像类似的想像于将界面暂时冻结，然后等到远端的服务器将需要的数据返回以后，自动的将界面又重新的解冻，使应用重新开始工作）

## 二. 显示信息 ##

学习目标：

*  添加一个 `MessagesComponent`，它在屏幕的底部显示应用中的消息。
 *  创建一个可注入的、全应用级别的 `MessageService`，用于发送要显示的消息。
 *  把 `MessageService` 注入到 `HeroService` 中。
 *  当 `HeroService` 成功获取了英雄数据时显示一条消息。

### 1.创建MessagesComponent（推荐使用CLI创建） ###

1.  `wjydeMacBook-Pro:demo wjy$ ng generate component messages`
2.  `CREATE src/app/messages/messages.component.css (0 bytes)`
3.  `CREATE src/app/messages/messages.component.html (27 bytes)`
4.  `CREATE src/app/messages/messages.component.spec.ts (642 bytes)`
5.  `CREATE src/app/messages/messages.component.ts (277 bytes)`
6.  `UPDATE src/app/app.module.ts (638 bytes)`

CLI 在 `src/app/messages`中创建了组件文件，并且把 `MessagesComponent` 声明在了 `AppModule` 中。

## 2.修改 `AppComponent` 的模板来显示所生成的 `MessagesComponent` ##

1.  `<h1>{ {title}}</h1>`
2.  `<app-heroes></app-heroes>`
3.  `<app-messages></app-messages>`

<app-messages> 是MessagesComponent的  selector: 'app-messages'

### 3.创建 `MessageService` ###

1.  `wjydeMacBook-Pro:demo wjy$ ng generate service messages`
2.  `CREATE src/app/messages.service.spec.ts (386 bytes)`
3.  `CREATE src/app/messages.service.ts (137 bytes)`

### 4.在MessagesService中增加一个message的变量，并且在写一个新增message的方法和清空message的方法。 ###

1.  `import {Injectable} from '@angular/core';`
2.   
3.  `@Injectable({`
4.  `providedIn: 'root'`
5.  `})`
6.  `export class MessageService {`
7.   
8.  `// messages 变量`
9.  `messages: string[] = [];`
10.  
11. `// 增加变量的函数`
12. `add(message: string) {`
13. `this.messages.push(message);`
14. `}`
15.  
16. `// 清空变量的函数`
17. `clear() {`
18. `this.messages = [];`
19. `}`
20.  
21. `// 构造方法`
22. `constructor() {`
23. `}`
24. `}`

### 5.把它注入到 `HeroService` 中 ###

打开 `HeroService`，将导入 `MessageService`。

import { MessageService } from './message.service';

### 6.修改这个构造函数 ###

添加一个私有的 `messageService` 属性参数。 Angular 将会在创建 `HeroService` 时把 `MessageService` 的单例注入到这个属性中。

constructor(private messageService: MessageService) { }

### 7.从 `HeroService` 中发送一条消息 ###

修改 `getHeroes` 方法，在获取到英雄数组时发送一条消息。

1.  `getHeroes(): Observable<Hero[]> {`
2.  `this.messageService.add('HeroService: fetched heroes');`
3.  `return of(HEROES);`
4.  `}`

### 8.从 `HeroService` 中显示消息 ###

打开 `MessagesComponent`，并且导入 `MessageService`。

import { MessageService } from '../message.service';

修改MessagesComponent构造函数，添加一个 **public** 的 `messageService` 属性。 Angular 将会在创建 `MessagesComponent` 的实例时 把 `MessageService` 的实例注入到这个属性中。

此处设`messageService为public是因为要在messageService在模版文件中用到。`

**`注意：⚠️Angular只会绑定公共的属性`**

### 9.绑定到 `MessageService` ###

`修改messageComponent的模版文件`

1.  `<div *ngIf="messageService.messages.length">`
2.  `<h2>Messages</h2>`
3.  `<button class="clear" (click)="messageService.clear()">clear`
4.  `</button>`
5.  `<div *ngFor='let message of messageService.messages'> { {message}}</div>`
6.  `</div>`

*  `*ngIf` 只有在有消息时才会显示消息区。
 *  `*ngFor`用来在一系列 `<div>` 元素中展示消息列表。
 *  Angular 的事件绑定把按钮的 `click` 事件绑定到了 `MessageService.clear()这个方法上了`。

### 10.保存运行，刷新浏览器，界面如下 ###

![70][]

### 11.使Message更好看点 ###

为MessagesComponent组件添加私有样式

1.  `h2 {`
2.  `color: red;`
3.  `font-family: Arial, Helvetica, sans-serif;`
4.  `font-weight: lighter;`
5.  `}`
6.  `body {`
7.  `margin: 2em;`
8.  `}`
9.  `body, input[text], button {`
10. `color: crimson;`
11. `font-family: Cambria, Georgia;`
12. `}`
13.  
14. `button.clear {`
15. `font-family: Arial;`
16. `background-color: #eee;`
17. `border: none;`
18. `padding: 5px 10px;`
19. `border-radius: 4px;`
20. `cursor: pointer;`
21. `cursor: hand;`
22. `}`
23. `button:hover {`
24. `background-color: #cfd8dc;`
25. `}`
26. `button:disabled {`
27. `background-color: #eee;`
28. `color: #aaa;`
29. `cursor: auto;`
30. `}`
31. `button.clear {`
32. `color: #888;`
33. `margin-bottom: 12px;`
34. `}`

[70]: /images/20220508/558d6226a96a43bfa311102ae27c07b7.png