Angular 中自定義 toJSON 操作符

如果對 RxJS 的 operators (操作符) 不熟悉的話，建議讀者在閱讀本文時，先閱讀RxJS - Observables, observers 和 operators 簡介這篇文章。

基礎知識什麼是 Operator

Operator 是一個函數，它接收一個 Observable 對象，然後返回一個新的 Observable 對象。當我們訂閱新返回的 Observable 對象時，它內部會自動訂閱前一個 Observable 對象。

如何為 Observable 添加操作符

比較常見的有以下三種方式：

1.使用 ES7 函數綁定運算符 (可使用BabelJS進行轉換)

someObservable::mySimpleOperator(x => x + ! );

2.繼承 Observable 類，並重寫 方法

class MyObservable extends Observable { lift(operator) { const observable = new MyObservable(); // res.json());

對於每個介面，我們都需要調用 map 操作符對返回的數據做對應的處理。那能不能簡化這個操作呢？答案是有的，我們可以通過自定義一個 toJSON 操作符來簡化上述的過程。具體實現如下：

function toJSON(): Observable { return this.map(( response : Response ) => response.json()); }

上面代碼中， 指向源 Observable 對象，即調用 http 對象的 方法後返回的 Observable 對象。此外我們直接返回了調用 操作符後新建的 Observable 對象。

為了能夠使用我們自定義的 操作符，我們需要把它添加到 Observable 的原型對象上：

最後的一件事是我們需要添加以下的定義：

declare module "rxjs/Observable" { interface Observable { toJSON : typeof toJSON; } }完整示例custom-operators.tsapp.module.tsimport { BrowserModule } from @angular/platform-browser ; import { NgModule } from @angular/core ; import { HttpModule } from "@angular/http"; import { AppComponent } from ./app.component ; import ./custom-operators ; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }app.component.tsimport { Observable } from rxjs/Observable ; import { Component, OnInit } from @angular/core ; import { Http } from @angular/http ; import rxjs/add/operator/map ; interface Member { id: string; login: string; avatar_url: string; } @Component({ selector: app-root , template: ` Angular Orgs Members

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！