您的位置: 首页  >  文章  >  Angular学习笔记9：服务（Service）（2）

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

分类: 文章 • 2025-01-12 20:14:10

可观察的对象（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.保存运行，刷新浏览器，界面如下

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

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. }

 

 

相关推荐