rxjs在ngx中的基础应用(数据处理,事件处理);

rxjs在处理异步事件和数据有着很便捷的api，angular非常推荐在应用中使用rxjs；

下面就介绍angular中使用rxjs处理http请求用户事件的一些基础方法

先看处理http的基础使用，直接贴代码了（依赖没有贴）：

import {Injectable,OnInit} from '@angular/core';
import {Http,Headers,Request,RequestOptions,Response,RequestMethod,URLSearchParams} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import {Subject} from 'rxjs/Subject';

import{User} from '../datas/user-model';

@Injectable()
export class UserRegisterService implements OnInit{
	
	public userRegisterURL = "mock-data/user-register-mock.json";
	public searchTextStream:Subject<string> = new Subject<string>();
	public subject:Subject<User> = new Subject<User>();

	constructor(
		public http:Http
	){};

	public get currentUser():Observable<User>{
		return this.subject.asObservable();
	}

	public postData(){//post数据
		let data = new URLSearchParams();
		data.append('email','809746561@qq.com');
		return this.http.post(this.userRegisterURL,data);
	}

	public getData(){//get数据
		return this.http.get(this.userRegisterURL)
		.map((response:Response)=>{
			let user = response.json();
			this.subject.next(user);
		})
	}
	ngOnInit(){

	}
}

下面是处理用户事件的（一个常见的需求，用户在搜索框输入文字等待多久（并且数据要有变化）才开始请求）：

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute,Router,Params} from '@angular/router';
import {Observable} from 'rxjs/Observable';
import {Subject} from 'rxjs/Subject';

@Component({
	selector:'app-postlist',
	templateUrl:'./postlist.component.html',
	styleUrls:['./postlist.component.scss']
})
export class PostlistComponent implements OnInit{
	public searchText:string;
	public searchTextStream:Subject<string> = new Subject<string>();//数据流

	constructor(
		public router:Router,
		public activeRoute:ActivatedRoute,
	){
		//promise写法
		let promise = new Promise(resolve=>{
			setTimeout(()=>{
				resolve('这是promise');
			},2000)
		})
		promise.then(value=>console.log(value));

		//Observable写法 订阅用subscribe  promises是then
		let stream1$ = new Observable(observer=>{
			let timeout = setTimeout(()=>{
				observer.next('这是observable');
			},2000)
			return clearTimeout(timeout);
		})
	}
	ngOnInit(){
		//rxjs处理事件
		//从路由里面获取url参数
		this.activeRoute.params.subscribe(params=>{
			console.log(params);
			this.currentPage=params.page;
			this.loadData(this.searchText);
		});
		this.searchTextStream
		.debounceTime(500)//等待500ms
		.distinctUntilChanged()//直到数据流发生改变
		.subscribe(searchText=>{
			console.log(this.searchText);
			this.loadData(this.searchText);
		})
	}

	public searchChanged($event):void{
		this.searchTextStream.next(this.searchText);//每一次搜索框数据改变，改变流中的数据为输入框中数据
	}
}

对应模板：

<div class="input-group">
    <input class="form-control" type="text" placeholder="{{'search' | translate}}" [(ngModel)]="searchText" (keyup)="searchChanged($event)" (change)="searchChanged($event)" id="searchText" name="searchText">
    <span class="input-group-btn">
        <button class="btn btn-default" type="button" (click)="searchChanged($event)"><i class="fa fa-search" aria-hidden="true"></i> {{'search' | translate}}</button>
    </span>
</div>