Rxjs 初体验 with angular2

Posted on   |   In

基本需求

  1. search 框输入关键词
  2. 随着输入后台自动请求结果并显示

主要代码

constructor(http: Http) {
    console.log(!!this.responseData.length);
    this.http = http;
    this.searchEl = document.querySelector('.searchInput');
    this.keyups = Rx.Observable.fromEvent(this.searchEl, 'keyup');
    this.requestStream = this.keyups
        .map(e => e.target.value)
        .filter(text => text.length > 2)
        .debounceTime(500)
        .distinctUntilChanged();

    this.requestStream.subscribe((x) => {
        this.http.get("https://api.github.com/search/repositories?q=" + x).subscribe(res=> {
            this.responseData = res.json().items;
            console.log(res.json().items);
        });
    });
}

遇到的坑

  • index.html里要引用 http.dev.js
  • 相关HTTP_PROVIDERS的引入
  • rxjs import 要这么写

    import * as Rx from ‘rxjs/Rx’;

  • 对Rxjs 的不熟悉包括 Observable的类型 和Operator
  • 练习angular2 的HTTP

https://github.com/dreambo8563/node_angular2/tree/ng-pages