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

一、項(xiàng)目起步

二、編寫路由組件

三、編寫頁(yè)面組件

1.編寫單一組件

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

3.編寫主從組件

四、編寫服務(wù)

1.為什么需要服務(wù)

2.編寫服務(wù)

五、引入RxJS

1.關(guān)于RxJS

2.引入RxJS

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

六、改造組件

1.添加歷史記錄組件

2.添加和刪除歷史記錄

七、HTTP改造

1.引入HTTP

2.通過(guò)HTTP請(qǐng)求數(shù)據(jù)

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

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

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

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

本項(xiàng)目源碼放在github

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

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

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

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

ng g service books

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

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

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

接下來(lái)我們開始編寫books.service.ts服務(wù)。

導(dǎo)入服務(wù)所需組件

這里我們導(dǎo)入Books和BookList，并添加一個(gè)getBooks方法來(lái)返回所有書本的數(shù)據(jù)，并且還需要添加一個(gè)getBooks方法來(lái)返回指定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)
  }
}

在我們使用這個(gè)服務(wù)之前，需要先注冊(cè)該服務(wù)，因?yàn)槲覀冊(cè)谑褂?b>ng g service books命令創(chuàng)建服務(wù)時(shí)，CLI已經(jīng)默認(rèn)為我們添加了注冊(cè)了，這是方法就是上面代碼中的：

providedIn: "root"

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

修改IndexComponent

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

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

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

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

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

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

修改DetailComponent

我們先改造書本詳情頁(yè)的HTML結(jié)構(gòu)：

  
《{{books.title}}》介紹
  

    
  
  
書本標(biāo)題: {{books.title}}
  
書本作者: {{books.author}}
  
書本id: {{books.id}}


  
暫無(wú)信息

知識(shí)點(diǎn)：
這里使用了*ngIf指令，當(dāng)條件為true則顯示其HTML內(nèi)容。

// 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服務(wù)
  ) { }

  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方法，當(dāng)剛進(jìn)入頁(yè)面時(shí)，將書本id傳入getBooks方法，去BooksService去獲取對(duì)應(yīng)id的書本信息，并復(fù)制給變量books，然后展示到頁(yè)面。

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

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

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

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

純凈性；

流動(dòng)性；

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

———— 來(lái)源Angular修仙之路 RxJS Observable

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

Observable (可觀察對(duì)象): 表示一個(gè)概念，這個(gè)概念是一個(gè)可調(diào)用的未來(lái)值或事件的集合。

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

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

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

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

Schedulers (調(diào)度器): 用來(lái)控制并發(fā)并且是中央集權(quán)的調(diào)度員，允許我們?cè)诎l(fā)生計(jì)算時(shí)進(jìn)行協(xié)調(diào)，例如 setTimeout 或 requestAnimationFrame 或其他。

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

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

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

改造BooksService

首先我們從 RxJS 中導(dǎo)入 Observable 和 of 符號(hào)：

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

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

然后修改getBookList方法

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

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

改造IndexComponent

這里也要修改getBooks方法，使用subscribe去訂閱服務(wù)返回回來(lái)的值：

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

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

下一步，我們就要改造一下項(xiàng)目了。

本部分內(nèi)容到這結(jié)束