資訊專欄INFORMATION COLUMN
摘要：然后我們在父組件上添加事件監聽，并傳入本地的在對應的中添加方法再來，我們在子組件上多導入和，并添加修飾器和調用這樣就實現了我們父子組件之間的事件傳遞啦，現在我們的頁面還是正常運行，并且刪除一條數據后，頁面數據會更新。
本文目錄
一、項目起步
二、編寫路由組件
三、編寫頁面組件
1.編寫單一組件
2.模擬數據
3.編寫主從組件
四、編寫服務
1.為什么需要服務
2.編寫服務
五、引入RxJS
1.關于RxJS
2.引入RxJS
3.改造數據獲取方式
六、改造組件
1.添加歷史記錄組件
2.添加和刪除歷史記錄
七、HTTP改造
1.引入HTTP
2.通過HTTP請求數據
3.通過HTTP修改數據
4.通過HTTP增加數據
5.通過HTTP刪除數據
6.通過HTTP查找數據
本項目源碼放在github
六、改造組件從這里開始，我們要使用RxJS來改造組件和添加新功能了，讓整個項目更加完善。
1.添加歷史記錄組件創建HistoryComponent組件
ng g component hostory
然后在app.component.html文件夾中添加組件：
2.添加增刪改查功能
這里我們要開始做書本的增刪改查功能，需要先創建一個HistoryService服務，方便我們實現這幾個功能：
創建HistoryService服務
ng g service history
然后在生成的ts文件中，增加add和clear方法，add方法用來添加歷史記錄到history數組中，clear方法則是清空history數組：
// history.service.ts
export class HistoryService {
history: string[] = [];
add(history: string){
this.history.push(history);
}
clear(){
this.history = [];
}
}
使用HistoryService服務
在將這個服務，注入到BooksService中，并改造getBooks方法：
// books.service.ts
import { HistoryService } from "./history.service";
constructor(
private historyservice: HistoryService
) { }
getBooks(): void{
this.historyservice.add("請求書本數據")
this.booksservice.getBookList()
.subscribe(books => this.books = books);
}
也可以用相同方法，在IndexComponent中添加訪問首頁書本列表的記錄。
// index.component.ts
import { HistoryService } from "../history.service";
constructor(
private booksservice: BooksService,
private historyservice: HistoryService
) { }
getBooks(): void{
this.historyservice.add("訪問首頁書本列表");
this.booksservice.getBookList()
.subscribe(books => this.books = books);
}
接下來，將我們的HistoryService注入到HistoryComponent中，然后才能將歷史數據顯示到頁面上：
// history.component.ts
import { HistoryService } from "../history.service";
export class HistoryComponent implements OnInit {
constructor(private historyservice: HistoryService) { }
ngOnInit() {}
}
操作歷史：
{{item}}
代碼解釋：
*ngIf="historyservice.history.length"，是為了防止還沒有拿到歷史數據，導致后面的報錯。
(click)="historyservice.clear()", 綁定我們服務中的clear事件，實現清除緩存。
*ngFor="let item of historyservice.history"，將我們的歷史數據渲染到頁面上。
到了這一步，就能看到歷史數據了，每次也換到首頁，都會增加一條。
接下來，我們要在書本詳情頁也加上歷史記錄的統計，導入文件，注入服務，然后改造getBooks方法，實現歷史記錄的統計：
// detail.component.ts
import { HistoryService } from "../history.service";
export class DetailComponent implements OnInit {
constructor(
private route: ActivatedRoute,
private location: Location,
private booksservice: BooksService,
private historyservice: HistoryService
) { }
//...
getBooks(id: number): void {
this.books = this.booksservice.getBook(id);
this.historyservice.add(`查看書本${this.books.title}，id為${this.books.id}`);
console.log(this.books)
}
}
這時候就可以在歷史記錄中，看到這些操作的記錄了，并且清除按鈕也正常使用。
七、HTTP改造原本我只想寫到上一章，但是想到，我們實際開發中，哪有什么本地數據，基本上數據都是要從服務端去請求，所以這邊也有必要引入這一張，模擬實際的HTTP請求。
1.引入HTTP在這一章，我們使用Angular提供的 HttpClient 來添加一些數據持久化特性。
然后實現對書本數據進行獲取，增加，修改，刪除和查找功能。
HttpClient是Angular通過 HTTP 與遠程服務器通訊的機制。
這里我們為了讓HttpClient在整個應用全局使用，所以將HttpClient導入到根模塊app.module.ts中，然后把它加入 @NgModule.imports 數組：
import { HttpClientModule } from "@angular/common/http";
@NgModule({
//...
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule
],
//...
})
這邊我們使用 內存 Web API（In-memory Web API） 模擬出的遠程數據服務器通訊。
注意： 這個內存 Web API 模塊與 Angular 中的 HTTP 模塊無關。
通過下面命令來安裝：
npm install angular-in-memory-web-api --save
然后在app.module.ts中導入 HttpClientInMemoryWebApiModule 和 InMemoryDataService 類（后面創建）：
// app.module.ts
import { HttpClientInMemoryWebApiModule } from "angular-in-memory-web-api";
import { InMemoryDataService } from "./in-memory-data.service";
@NgModule({
// ...
imports: [
// ...
HttpClientInMemoryWebApiModule.forRoot(
InMemoryDataService, {dataEncapsulation:false}
)
],
// ...
})
export class AppModule { }
知識點：
forRoot() 配置方法接受一個 InMemoryDataService 類（初期的內存數據庫）作為參數。
然后我們要創建InMemoryDataService類：
ng g service InMemoryData
并將生成的in-memory-data.service.ts修改為：
// in-memory-data.service.ts
import { Injectable } from "@angular/core";
import { InMemoryDbService } from "angular-in-memory-web-api";
import { Books } from "./books";
@Injectable({
providedIn: "root"
})
export class InMemoryDataService implements InMemoryDbService {
createDb(){
const books = [
{
id: 1,
url: "https://img3.doubanio.com/view/subject/m/public/s29988481.jpg",
title: "像火焰像灰燼",
author: "程姬",
},
// 省略其他9條數據
];
return {books};
}
constructor() { }
}
這里先總結InMemoryDbService所提供的RESTful API，后面都要用到：
例如如果url是api/books，那么
查詢所有成員：以GET方法訪問api/books
查詢某個成員：以GET方法訪問api/books/id，比如id是1，那么訪問api/books/1
更新某個成員：以PUT方法訪問api/books/id
刪除某個成員：以DELETE方法訪問api/books/id
增加一個成員：以POST方法訪問api/books
2.通過HTTP請求數據現在要為接下來的網絡請求做一些準備，先在books.service.ts中引入HTTP符號，然后注入HttpClient并改造：
// books.service.ts
import { HttpClient, HttpHeaders} from "@angular/common/http";
// ...
export class BooksService {
constructor(
private historyservice: HistoryService,
private http: HttpClient
) { }
private log(histories: string){
this.historyservice.add(`正在執行：${histories}`)
}
private booksUrl = "api/books"; // 提供一個API供調用
// ...
}
這里我們還新增一個私有方法log和一個私有變量booksUrl。
接下來我們要開始發起http請求數據，開始改造getBookList方法：
