摘要：發(fā)布通過回調方法向發(fā)布事件。觀察者一個回調函數(shù)的集合，它知道如何去監(jiān)聽由提供的值。

一、項目起步

二、編寫路由組件

三、編寫頁面組件

1.編寫單一組件

2.模擬數(shù)據(jù)

3.編寫主從組件

四、編寫服務

1.為什么需要服務

2.編寫服務

五、引入RxJS

1.關于RxJS

2.引入RxJS

3.改造數(shù)據(jù)獲取方式

六、改造組件

1.添加歷史記錄組件

2.添加和刪除歷史記錄

七、HTTP改造

1.引入HTTP

2.通過HTTP請求數(shù)據(jù)

3.通過HTTP修改數(shù)據(jù)

4.通過HTTP增加數(shù)據(jù)

5.通過HTTP刪除數(shù)據(jù)

6.通過HTTP查找數(shù)據(jù)

本項目源碼放在github

截止到這部分，我們的BooksComponent組件獲取和顯示的都是本地模擬的數(shù)據(jù)。
接下來我們要開始對這些進行重構，讓聚焦于為它的視圖提供支持，這也讓它更容易使用模擬服務進行單元測試。

我們不應該讓組件來直接獲取或保存數(shù)據(jù)，它們應該聚焦于展示數(shù)據(jù)，而數(shù)據(jù)訪問的工作交給其他服務來做。
這里我們需要創(chuàng)建一個名為BooksService的服務，讓我們應用中所有的類都使用它來獲取書本列表的數(shù)據(jù)，使用的時候，只需要將它通過Angular的依賴注入機制注入到需要用的組件的構造函數(shù)中。

知識點：
服務可以實現(xiàn)多個不同組件之間信息共享，后面我們還會將它注入到兩個地方：
BooksService中，使用該服務發(fā)送消息。
IndexService中，使用該服務來展示消息。

接下來我們使用命令行，創(chuàng)建BooksService ：

ng g service books

在生成的books.service.ts文件中：

// books.service.ts
import { Injectable } from "@angular/core";
@Injectable({
  providedIn: "root"
})

新導入了@Injectable裝飾器，是為了讓BooksService提供一個可注入的服務，并且它還可以擁有自己的待注入的依賴，簡單理解就是如果你的服務需要依賴，那么你就需要導入它。
并且它接收該服務的元數(shù)據(jù)對象。

接下來我們開始編寫books.service.ts服務。

導入服務所需組件

這里我們導入Books和BookList，并添加一個getBooks方法來返回所有書本的數(shù)據(jù)，并且還需要添加一個getBooks方法來返回指定id的書本信息:

// index.component.ts
import { Books } from "./books";
import { BookList } from "./mock-books";
@Injectable({
  providedIn: "root"
})
export class BooksService {
  constructor() { }
  getBookList(): Books[] {
    return BookList;
  }
  getBook(id: number): Books{
    return BookList.find(book => book.id === id)
  }
}

在我們使用這個服務之前，需要先注冊該服務，因為我們在使用ng g service books命令創(chuàng)建服務時，CLI已經(jīng)默認為我們添加了注冊了，這是方法就是上面代碼中的：

providedIn: "root"

表示將我們的服務注冊在根注入器上，這樣我們就可以把這個服務注入到任何享用的類上了。

修改IndexComponent

先刪除BookList的引入，并修改books屬性的定義：

// index.component.ts
import { BooksService } from "../books.service";
export class IndexComponent implements OnInit {
  books : Books[];
  ngOnInit() {}
}

然后注入我們的BooksService服務，需要先往構造函數(shù)中添加一個私有的booksservice，使用注入的BooksService作為類型，理解成一個注入點：

// index.component.ts
constructor(private booksservice: BooksService) { }

之后我們需要添加一個getBooks方法來獲取這些書本數(shù)據(jù)，并在生命周期函數(shù)ngOnInit中調用：

export class IndexComponent implements OnInit {
  ngOnInit() {
    this.getBooks();
  }
  getBooks(): void{
    this.books = this.booksservice.getBookList();
  }
}

修改DetailComponent

我們先改造書本詳情頁的HTML結構：

  
《{{books.title}}》介紹
  

    
  
  
書本標題: {{books.title}}
  
書本作者: {{books.author}}
  
書本id: {{books.id}}


  
暫無信息

知識點：
這里使用了*ngIf指令，當條件為true則顯示其HTML內容。

// detail.component.ts
import { Books } from "../books";
import { BooksService } from "../books.service";
export class DetailComponent implements OnInit {
  constructor(
    private route: ActivatedRoute,
    private location: Location,
    private booksservice: BooksService  // 引入BooksService服務
  ) { }

  books: Books;  // 定義books類型
  ngOnInit() {
    this.getDetail()
  }
  getDetail(): void{
    const id = +this.route.snapshot.paramMap.get("id");
    this.getBooks(id);
  }
  getBooks(id: number): void {
    this.books = this.booksservice.getBook(id);
  }
}

這段代碼，主要定義了getBooks方法，當剛進入頁面時，將書本id傳入getBooks方法，去BooksService去獲取對應id的書本信息，并復制給變量books，然后展示到頁面。

改造之后，我們的頁面顯示依舊正常。

但是我們要知道，這背后的邏輯已經(jīng)改變了。

這里簡單介紹關鍵概念，具體可以查看 RxJS 官網(wǎng)，也可以參考 淺析Angular之RxJS。

RxJS全稱Reactive Extensions for JavaScript，中文意思: JavaScript的響應式擴展。
RxJS主要是提供一種更加強大和優(yōu)雅的方式，來利用響應式編程的模式，實現(xiàn)JavaScript的異步編程。

純凈性；

流動性；

RxJS 是基于觀察者模式和迭代器模式以函數(shù)式編程思維來實現(xiàn)的。RxJS 中含有兩個基本概念：Observables 與 Observer。
Observables 作為被觀察者，是一個值或事件的流集合；而 Observer 則作為觀察者，根據(jù) Observables 進行處理。它們之間的訂閱發(fā)布關系(觀察者模式) 如下：
訂閱：Observer 通過 Observable 提供的 subscribe() 方法訂閱 Observable。
發(fā)布：Observable 通過回調 next 方法向 Observer 發(fā)布事件。

———— 來源Angular修仙之路 RxJS Observable

另外這里列出來一些核心，具體還是看官網(wǎng)咯，并且下面使用到的時候會具體介紹。

Observable (可觀察對象): 表示一個概念，這個概念是一個可調用的未來值或事件的集合。

Observer(觀察者): 一個回調函數(shù)的集合，它知道如何去監(jiān)聽由 Observable 提供的值。

Subscription (訂閱): 表示 Observable 的執(zhí)行，主要用于取消 Observable 的執(zhí)行。

Operators (操作符): 采用函數(shù)式編程風格的純函數(shù) (pure function)，使用像 map、filter、concat、flatMap 等這樣的操作符來處理集合。

Subject (主體): 相當于 EventEmitter，并且是將值或事件多路推送給多個 Observer 的唯一方式。

Schedulers (調度器): 用來控制并發(fā)并且是中央集權的調度員，允許我們在發(fā)生計算時進行協(xié)調，例如 setTimeout 或 requestAnimationFrame 或其他。

在我們的真實應用中，我們必須要等到服務器響應后，我們才能獲取到數(shù)據(jù)，因此這天生就需要用異步思維來操作。

由于Angular中已經(jīng)自帶RxJS，所以我們只要在需要使用的時候，引入即可使用：

了解完RxJS的一些概念后，我們開始改造下這些書本的數(shù)據(jù)獲取方式。

改造BooksService

首先我們從 RxJS 中導入 Observable 和 of 符號：

// books.service.ts
import { Observable, of } from "rxjs";

知識點：
Observable: 觀察者模式中的觀察者，具體可以參考 Angular修仙之路 RxJS Observable
of: 用來獲取觀察者拿到的數(shù)據(jù)，通常是一個Observable。

然后修改getBookList方法

// books.service.ts
getBookList(): Observable {
  return of(BookList);
}

這里 of(BookList) 返回一個 Observable，它會發(fā)出單個值，這個值就是這些模擬書本的數(shù)組。

改造IndexComponent

這里也要修改getBooks方法，使用subscribe去訂閱服務返回回來的值：

// index.component.ts
getBooks(): void{
  this.booksservice.getBookList()
    .subscribe(books => this.books = books);
}

由于原本直接賦值數(shù)據(jù)，在實際場景中是不可能這樣同步的，所以這里subscribe函數(shù)，會在Observable發(fā)出數(shù)據(jù)以后，再把書本列表傳到里面的回調函數(shù)，再復制給books屬性。
使用這種異步方式，當 BooksService 從遠端服務器獲取英雄數(shù)據(jù)時，不用擔心還沒拿到數(shù)據(jù)就執(zhí)行后面。

下一步，我們就要改造一下項目了。

本部分內容到這結束