Angular5+Rxjs入门

1：通过 npm 安装

npm install rxjs

2：转换成 observables

// 来自一个或多个值
Observable.of('foo', 'bar');

// 来自数组
Observable.from([1,2,3]);

// 来自事件
Observable.fromEvent(document.querySelector('button'), 'click');

// 来自 Promise
ngOnInit(){
  let PromiseExample = Observable.fromPromise(this.getExample()).toPromise();
  PromiseExample.then(v => console.log(v)).then(() => {
     console.log('Agular5');
  })
}

getExample() {
  let p = new Promise(resolve => {
    resolve('欢迎来到');
  })
  return p;
}

注意此处多个值转换成多个observables，一个数组里面多个值也会转换成多个observables。

3：创建 observables

在外部产生新事件。

let myObservable = new Subject();
myObservable.subscribe(value => { 
  console.log(value));
}
myObservable.next('foo');//这里的next()方法实际上调用的是myObservable.destination._next()方法

在内部产生新事件。

let myObservable = Observable.create(observer => {
  observer.next('foo');
  setTimeout(() => observer.next('bar'), 1000);
});
myObservable.subscribe(value => console.log(value));

选择哪种方式需要根据场景，使用 Subject，你可以从任何地方触发新事件，并且将已存在的 observables 和它进行连接。
4：常用操作符
scan 操作符的工作原理与数组的 reduce 类似。它需要一个暴露给回调函数当参数的初始值。每次回调函数运行后的返回值会作为下次回调函数运行时的参数。

//html
<button #EditView>点击</button>

//ts
count = 0;
Observable.fromEvent(this.greetDiv.nativeElement, 'click').scan(c => this.count + 1, 0).subscribe(count => {
    console.log(count)
    this.count = count;
 })

map 它把每个源值传递给转化函数以获得相应的输出值

 let mapExample = Observable.from(['1', '2']).map(v => Number.parseInt(v) * 10);
 mapExample .subscribe(v => {
     console.log(v)
 })

filter 类似于大家所熟知的 Array.prototype.filter 方法，此操作符从源 Observable 中接收值，将值传递给判断函数并且只发出返回 true 的这些值。

let filterExample = Observable.from(['1', '2']).filter(f => Number.parseInt(f) < 2).map(va => Number.parseInt(va) * 10);
filterExample .subscribe(v => {
    console.log(v)
})

every返回的 Observable 发出是否源 Observable 的每项都满足指定的条件

//如果所有元素都小于5就发出 `true`，反之 `false`
 Observable.of(1, 2, 3, 4, 5, 6)
 .every(x => x < 5)
.subscribe(x => console.log(x)); // -> false

find只发出源 Observable 所发出的值中第一个满足条件的值

let findExample = Observable.from(['a', 'b', 'c']).find(v => v == 'b');
findExample.subscribe(v => {
    console.log(v)
})

findIndex只发出源 Observable 所发出的值中第一个满足条件的值的索引

let findIndexExample = Observable.from(['a', 'b', 'c']).findIndex(v => v == 'b');
findIndexExample .subscribe(v => {
    console.log(v)
})

isEmpty如果源 Observable 是空的话，它返回一个发出 true 的 Observable，否则发出 false

 let emptyExample = Observable.from([]).isEmpty();
 emptyExample.subscribe(v => {
    console.log(v)
 })

最后编辑于：2018.10.30 17:14:29