摘要:發布通過回調方法向發布事件。觀察者一個回調函數的集合,它知道如何去監聽由提供的值。
本文目錄
一、項目起步
二、編寫路由組件
三、編寫頁面組件
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
四、編寫服務截止到這部分,我們的BooksComponent組件獲取和顯示的都是本地模擬的數據。
接下來我們要開始對這些進行重構,讓聚焦于為它的視圖提供支持,這也讓它更容易使用模擬服務進行單元測試。
我們不應該讓組件來直接獲取或保存數據,它們應該聚焦于展示數據,而數據訪問的工作交給其他服務來做。
這里我們需要創建一個名為BooksService的服務,讓我們應用中所有的類都使用它來獲取書本列表的數據,使用的時候,只需要將它通過Angular的依賴注入機制注入到需要用的組件的構造函數中。
知識點:
服務可以實現多個不同組件之間信息共享,后面我們還會將它注入到兩個地方:
BooksService中,使用該服務發送消息。
IndexService中,使用該服務來展示消息。
接下來我們使用命令行,創建BooksService :
ng g service books
在生成的books.service.ts文件中:
// books.service.ts import { Injectable } from "@angular/core"; @Injectable({ providedIn: "root" })
新導入了@Injectable裝飾器,是為了讓BooksService提供一個可注入的服務,并且它還可以擁有自己的待注入的依賴,簡單理解就是如果你的服務需要依賴,那么你就需要導入它。
并且它接收該服務的元數據對象。
接下來我們開始編寫books.service.ts服務。
導入服務所需組件
這里我們導入Books和BookList,并添加一個getBooks方法來返回所有書本的數據,并且還需要添加一個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命令創建服務時,CLI已經默認為我們添加了注冊了,這是方法就是上面代碼中的:
providedIn: "root"
表示將我們的服務注冊在根注入器上,這樣我們就可以把這個服務注入到任何享用的類上了。
修改IndexComponent
先刪除BookList的引入,并修改books屬性的定義:
// index.component.ts import { BooksService } from "../books.service"; export class IndexComponent implements OnInit { books : Books[]; ngOnInit() {} }
然后注入我們的BooksService服務,需要先往構造函數中添加一個私有的booksservice,使用注入的BooksService作為類型,理解成一個注入點:
// index.component.ts constructor(private booksservice: BooksService) { }
之后我們需要添加一個getBooks方法來獲取這些書本數據,并在生命周期函數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,然后展示到頁面。
改造之后,我們的頁面顯示依舊正常。
但是我們要知道,這背后的邏輯已經改變了。
五、引入RxJS改造項目 1.關于RxJS這里簡單介紹關鍵概念,具體可以查看 RxJS 官網,也可以參考 淺析Angular之RxJS。
什么是RxJSRxJS全稱Reactive Extensions for JavaScript,中文意思: JavaScript的響應式擴展。
RxJS主要是提供一種更加強大和優雅的方式,來利用響應式編程的模式,實現JavaScript的異步編程。
純凈性;
流動性;
RxJS核心概念RxJS 是基于觀察者模式和迭代器模式以函數式編程思維來實現的。RxJS 中含有兩個基本概念:Observables 與 Observer。
Observables 作為被觀察者,是一個值或事件的流集合;而 Observer 則作為觀察者,根據 Observables 進行處理。它們之間的訂閱發布關系(觀察者模式) 如下:
訂閱:Observer 通過 Observable 提供的 subscribe() 方法訂閱 Observable。
發布:Observable 通過回調 next 方法向 Observer 發布事件。
———— 來源Angular修仙之路 RxJS Observable
另外這里列出來一些核心,具體還是看官網咯,并且下面使用到的時候會具體介紹。
Observable (可觀察對象): 表示一個概念,這個概念是一個可調用的未來值或事件的集合。
Observer(觀察者): 一個回調函數的集合,它知道如何去監聽由 Observable 提供的值。
Subscription (訂閱): 表示 Observable 的執行,主要用于取消 Observable 的執行。
Operators (操作符): 采用函數式編程風格的純函數 (pure function),使用像 map、filter、concat、flatMap 等這樣的操作符來處理集合。
Subject (主體): 相當于 EventEmitter,并且是將值或事件多路推送給多個 Observer 的唯一方式。
Schedulers (調度器): 用來控制并發并且是中央集權的調度員,允許我們在發生計算時進行協調,例如 setTimeout 或 requestAnimationFrame 或其他。
2.引入RxJS在我們的真實應用中,我們必須要等到服務器響應后,我們才能獲取到數據,因此這天生就需要用異步思維來操作。
由于Angular中已經自帶RxJS,所以我們只要在需要使用的時候,引入即可使用:
3.改造數據獲取方式了解完RxJS的一些概念后,我們開始改造下這些書本的數據獲取方式。
改造BooksService
首先我們從 RxJS 中導入 Observable 和 of 符號:
// books.service.ts import { Observable, of } from "rxjs";
知識點:
Observable: 觀察者模式中的觀察者,具體可以參考 Angular修仙之路 RxJS Observable
of: 用來獲取觀察者拿到的數據,通常是一個Observable。
然后修改getBookList方法
// books.service.ts getBookList(): Observable{ return of(BookList); }
這里 of(BookList) 返回一個 Observable
改造IndexComponent
這里也要修改getBooks方法,使用subscribe去訂閱服務返回回來的值:
// index.component.ts getBooks(): void{ this.booksservice.getBookList() .subscribe(books => this.books = books); }
由于原本直接賦值數據,在實際場景中是不可能這樣同步的,所以這里subscribe函數,會在Observable發出數據以后,再把書本列表傳到里面的回調函數,再復制給books屬性。
使用這種異步方式,當 BooksService 從遠端服務器獲取英雄數據時,不用擔心還沒拿到數據就執行后面。
下一步,我們就要改造一下項目了。
本部分內容到這結束
Author | 王平安 |
---|---|
pingan8787@qq.com | |
博 客 | www.pingan8787.com |
微 信 | pingan8787 |
每日文章推薦 | https://github.com/pingan8787... |
JS小冊 | js.pingan8787.com |
微信公眾號 | 前端自習課 |
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/102025.html
摘要:啟動服務,并打開新窗口可簡寫創建新組件可簡寫創建新服務創建路由模塊其他另外還有很多的命令提供,詳細可以查閱官方文檔命令。引入路由模塊導出路由模塊的指令這里需要添加一個數組,并傳入,導出讓路由器的相關指令可以在中的組件中使用。 本文目錄 一、項目起步 二、編寫路由組件 三、編寫頁面組件 1.編寫單一組件 2.模擬數據 3.編寫主從組件 四、編寫服務 1.為什么需要服務 2....
摘要:編寫單一組件我們首先寫一個書本信息的組件,代碼如下單個課本像火焰像灰燼程姬知識點是一個的復寫器指令,就像中的和中的。寫到這里,看看我們項目,還是一樣正常在運行,只是現在項目中組件分工更加明確了。 本文目錄 一、項目起步 二、編寫路由組件 三、編寫頁面組件 1.編寫單一組件 2.模擬數據 3.編寫主從組件 四、編寫服務 1.為什么需要服務 2.編寫服務 五、...
摘要:然后我們在父組件上添加事件監聽,并傳入本地的在對應的中添加方法再來,我們在子組件上多導入和,并添加修飾器和調用這樣就實現了我們父子組件之間的事件傳遞啦,現在我們的頁面還是正常運行,并且刪除一條數據后,頁面數據會更新。 本文目錄 一、項目起步 二、編寫路由組件 三、編寫頁面組件 1.編寫單一組件 2.模擬數據 3.編寫主從組件 四、編寫服務 1.為什么需要服務 ...
摘要:最終代碼省略其他輸入類型用標識查詢類型需要至少定義一個不要會不顯示查詢這里需要轉成數組因為前面定義了返回值是類型相當于數據庫的添加操作相當于數據庫的更新操作省略其他現在我們可以啟動服務器,在上測試下效果了。 showImg(https://segmentfault.com/img/remote/1460000019142304?w=893&h=438); 看完復聯四,我整理了這份 Gr...
摘要:在上一篇博文用戶列表與詳情展示中我們用實現了用戶列表的展示并通過語法實現了列表單擊時將單擊的對象傳到后臺的功能最后為了防止初次加載對象為空導致的錯誤我們又使用了語法來對要展示的詳情對象進行判空操作但隨著后續模塊的增多以及業務的交叉我們 在上一篇博文《Angular6.x---用戶列表與詳情展示》中,我們用ngFor=let object of list實現了用戶列表的展示,并通過...
閱讀 3259·2021-11-15 11:37
閱讀 1065·2021-11-02 14:45
閱讀 3893·2021-09-04 16:48
閱讀 3569·2019-08-30 15:55
閱讀 748·2019-08-23 17:53
閱讀 994·2019-08-23 17:03
閱讀 2020·2019-08-23 16:43
閱讀 2183·2019-08-23 16:22