Angular 中自定义 toJSON 操作符
基础知识什么是 OperatorOperator 是一个函数,它接收一个 Observable 对象,然后返回一个新的 Observable 对象。当我们订阅新返回的 Observable 对象时,它内部会自动订阅前一个 Observable 对象。 如何为 Observable 添加操作符比较常见的有以下三种方式: 1.使用 ES7 函数绑定运算符 someObservable::mySimpleOperator(x => x + '!'); 2.继承 Observable 类,并重写 class MyObservable extends Observable { lift(operator) { const observable = new MyObservable(); //<-- important part here observable.source = this; observable.operator = operator; return observable; } // put it here .. or .. customOperator() { /* do things and return an Observable */ } } // ... put it here... MyObservable.prototype.mySimpleOperator = mySimpleOperator; 3.直接添加到 Observable.prototype.mySimpleOperator = mySimpleOperator; someObservable.mySimpleOperator(x => x + '!'); 自定义 toJSON 操作符当我们使用 Angular HTTP 服务时,我们需要调用 Response 对象的 this.http.get('https://api.github.com/orgs/angular/members?page=1&per_page=5') .map(res => res.json()); 对于每个接口,我们都需要调用 map 操作符对返回的数据做对应的处理。那能不能简化这个操作呢?答案是有的,我们可以通过自定义一个 toJSON 操作符来简化上述的过程。具体实现如下: function toJSON<T>(): Observable<T> { return this.map(( response : Response ) => response.json()); } 上面代码中, 为了能够使用我们自定义的 Observable.prototype.toJSON = toJSON; 最后的一件事是我们需要添加以下的定义: declare module "rxjs/Observable" { interface Observable<T> { toJSON : typeof toJSON; } } 完整示例custom-operators.tsimport { Observable } from 'rxjs/Observable'; function toJSON<T>(): Observable<T> { return this.map(( response : Response ) => response.json()); } Observable.prototype.toJSON = toJSON; app.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: ` <h3>Angular Orgs Members</h3> <ul *ngIf="members"> <li *ngFor="let member of members;"> <p> <img [src]="member.avatar_url" width="48" height="48"/> ID:<span>{{member.id}}</span> Name: <span>{{member.login}}</span> </p> </li> </ul> ` }) export class AppComponent implements OnInit { members: Member[]; constructor(private http: Http) { } ngOnInit() { this.http.get(`https://api.github.com/orgs/angular/members?page=1&per_page=5`) .toJSON<Member[]>() // 使用自定义 toJSON 操作符 .subscribe(data => { if (data) this.members = data; }); } } typings.d.ts// src/typings.d.ts (在该文件下,新增以下内容) export declare function toJSON<T>(): Observable<T>; declare module "rxjs/Observable" { interface Observable<T> { toJSON : typeof toJSON; } } 参考资源
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |