Observable的通俗理解

Observable在消息发布者和观察者Observer之间起到一个媒体中介的作用，Observer是真正需要接受信息的人。Observable的实例提供了一个订阅函数，subscribe()。当Observable的实例接收到信息时，将Observer作为参数传递给subscribe(),也就是通过subscribe()函数通知Observer，Observer接到通知后，使用next()方法再通知Observable()表示可以传数据了,然后Observer可以一直接收到数据，直到发生error(),或是数据接收完成，complete();

创建Observable对象的几种情形

1. 通过promise创建

    import {fromPromise} from 'rxjs';const data = fromPromise(fetch('api/endpoint'));data.subscribe({next(response){console.log(response);},error(err){console.error('Error' + err);},complete(){console.log('Completed');}});

1. 通过counter创建

  import {interval} from 'rxjs';//创建一个将要在计时器上发布值的Observableconst secondsCounter = interval(1000);//开始发布值secondsCounter.subscribe(n =>console.log(`It is been ${n} seconds since subscribeing`));

1. 通过事件创建

   import {fromEvent} from 'rxjs';const el = document.getElementById('my-element');const mouseMoves = fromEvent(el,'mousemove');const subscription = mouseMoves.subscribe((evt:MouseEvent)=>{console.log(`Cooeds:${evt.clientX} X ${evt.clientY} `);if(evt.clientX <40 && evt.clientY <40){subscription.unsubscribe();}});

4.通过ajax创建

 import {ajax} from 'rxjs/ajax';const apiData = ajax('/api/data');apiData.subscribe(res =>console.log(res.status,res.response));

angular中用到的Observable

• EventEmitter:它是继承于Observable的，但是又有了自己的emit(）,用来将要发送的值传递给 observer.next()；如下代码：

//html文件
<zippy (open)="onOpen($event)" (close)="onClose($event)"></zipppy>
//ts文件
@Component({selector: 'zippy',template: `<div class="zippy"><div (click)="toggle()">Toggle</div><div [hidden]="!visible"><ng-content></ng-content></div></div>`})
export class ZippyComponent {visible = true;@Output() open = new EventEmitter<any>();@Output() close = new EventEmitter<any>();toggle() {this.visible = !this.visible;if (this.visible) {this.open.emit(null);} else {this.close.emit(null);}
}

• HttpClient:它从 HTTP 方法调用中返回了可观察对象。例如，http.get(‘/api’) 就会返回可观察对象

getHeroes(): Observable<Hero[]> {// this.messageService.add('HeroService:fetched heroes');//发送数据到缓存中// return of(HEROES);// 这里可以改成HttpClient.get<Hero[]>这里也会返回一个Observable<Hero[]>// 采用RxJS中的of()方法模拟获取数据return this.http.get<Hero[]>(this.heroesUrl).pipe(tap(heroes => this.log(`fetched heroes`)),catchError(this.handleError('getHeroes', [])));

• router:ActivatedRoute 是一个可注入的路由器服务，它使用Observable来获取关于路由路径和路由参数的信息;如：

    import { ActivatedRoute } from '@angular/router';@Component({selector: 'app-routable',templateUrl: './routable.component.html',styleUrls: ['./routable.component.css']})export class Routable2Component implements OnInit {constructor(private activatedRoute: ActivatedRoute) {}ngOnInit() {this.activatedRoute.url.subscribe(url => console.log('The URL changed to: ' + url));}}

• reactive forms:响应式表单，表单有些属性用Observable来监听表单控件的值；FormControl 的 valueChanges和 statusChanges 包含了会发出变更事件的Observable,如图：

    import { FormGroup } from '@angular/forms';@Component({selector: 'my-component',template: 'MyComponent Template'})export class MyComponent implements OnInit {nameChangeLog: string[] = [];heroForm: FormGroup;ngOnInit() {this.logNameChange();}logNameChange() {const nameControl = this.heroForm.get('name');nameControl.valueChanges.forEach((value: string) => this.nameChangeLog.push(value));}}

参考：angular官方文档