学习目标

这一篇是纪录阅读官方文件 Add services 的笔记内容。
本篇的内容是接续 Day08 的後续内容。

Observable 型别的资料

到目前为止，我们元件中接收资料都是以同步的形式接收资料库中的资料，但是，在实务上的运用不是用这种形式来接收资料的，而是用非同步的方式去远端的服务器端取得所需的资料。

所以，我们会利用 Angular 中的 HttpClient.get 的方式来达成非同步从远端 server 取得资料的机制。

在 Angular 中的 HttpClient.get() 是会回传一个 Observable 的结果。

加入 Observable 到 HeroService 中

所以，我们要引入一些来自 RxJS 的内容来更改一下原本的 HersoService 档案的回传资料型别，然後，改一下原本的 getHeroes 函式的回传资料型别

--- hero.service.ts ---
import { HERO } from './hero';
import { HEROES } from './mock-heroes';
import { Observable, of } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class HeroService {
	// ...
  getHeroes(): Observable<HERO[]> {
    const heroes = of(HEROES);
    return heroes;
  }
}

可以看到上面的范例有写 of(HEROES) ，它会回传一个 Observable<HERO[]>，它会发送出一个单一值，这个值是一个英雄资料的阵列。

订阅 HeroesComponent 的回传资料

因为，在 HeroService 的回传资料型别已经改成 Observable<Hero[]>，所以，我们要更改一下 HeroComponent 的 getHeroes 的内容

--- heroes.component.ts ---
getHeroes(): void {
  this.heroService.getHeroes()
      .subscribe(heroes => this.heroes = heroes);
}

加入 Observable 到我们回传的资料格式之後，这个回传的机制就会等待 Observable 发送出含有英雄资料的阵列，接着，才会执行 subscribe 的内容，也就是将发送出来的阵列设给 HeroComponent 的 heroes 中。

加入展示讯息的元件和服务

接下来我们要新增 MessageComponent 和 MessageService，
MessageComponent 会负责展示讯息在画面的底部，
MessageService 会负责传送要被呈现的讯息内容

新增 MessagesComponent 元件 和 MessageService

输入 ng generate component messages ，新增这个元件之後，再把它加入到 app.component.html。
接着，输入 ng generate service message 来新增这个服务，然後，在它的档案内容加入以下的内容，内容就是把 cache 住的讯息内容加入其他内容或者清除这个 cache 的内容。

--- message.service.ts ---
@Injectable({
  providedIn: 'root',
})
export class MessageService {
  messages: string[] = [];
  add(message: string) {
    this.messages.push(message);
  }
  clear() {
    this.messages = [];
  }
}

接下来，我们把 MessageService 注入到 HeroService 中，
并且将 MessageService 的加入讯息内容的功能，加到 getHeroes 中

--- hero.service.ts ---
import { MessageService } from './message.service';

export class HeroService {
  constructor(private messageService:MessageService) { }

	getHeroes(): Observable<HERO[]> {
	    const heroes = of(HEROES);
	    this.messageService.add('HeroService: fetched heroes');  // 加入MessageService服务
	    return heroes;
	  }
}

在 HeroService 加入 message 的功能

因为 MessagesComponent 元件是负责将 cache 的讯息呈现出来，所以，也要将 MessageService 的内容引入这个元件中

--- messages.component.ts ---
import { MessageService } from '../message.service';
@Component({
	// ...
})
export class MessagesComponent implements OnInit {
  constructor(public messageService:MessageService) { }
}

Note:
这边要注意一下，我们在建构式将 messageService 设为 public 成员，因为，未来它会被样板中的元素做连结，若用 private 来宣告它的话，就没有办法在样板中调用它。
Angular 只有连结 public 的元件属性

系结 MessageService

接下来就把 MessageService 的内容加到 MessagesComponent 的样板中吧~

--- messages.component.html ---
<div *ngIf="messageService.messages.length">
  <h2>Messages</h2>
  <button class="clear"
          (click)="messageService.clear()">Clear messages</button>
  <div *ngFor='let message of messageService.messages'> {{message}} </div>
</div>

这边可以注意到一点，有特别加了 *ngIf 的判定，来防止当 messageService.messages 没有任何内容的时候，浏览器会报错。

将 MessageService 功能注入到 HeroService 中

接下来，我们也要将 messageService 加入到 HeroComponent 中，让当有英雄被点击後，被点选的英雄资讯会出现在 messageService 的提示讯息中。

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

@Component({
  // ...
})
export class HeroesComponent implements OnInit {
	// ...
  constructor(private heroService: HeroService, private messageService: MessageService) { }
  onSelect(hero: Hero): void {
    this.selectedHero = hero;
    this.messageService.add(`HeroesComponent: Selected hero id=${hero.id}`);
  }
}

最後成果

完成以上的内容之後，就可以看到以下的操作动画成果罗~

Summary

这边做个总结

1. 我们加入了 RxJS 的 Observable 和 of 来完成非同步的资料接收的机制。
2. 加入了 MessageService 和 MessageComponent 来达成传递讯息和展示讯息的功能。