为什么80%的码农都做不了架构师？>>> 
Observable的通俗理解
Observable在消息发布者和观察者Observer之间起到一个媒体中介的作用，Observer是真正需要接受信息的人。Observable的实例提供了一个订阅函数，subscribe()。当Observable的实例接收到信息时，将Observer作为参数传递给subscribe(),也就是通过subscribe()函数通知Observer，Observer接到通知后，使用next()方法再通知Observable()表示可以传数据了,然后Observer可以一直接收到数据，直到发生error(),或是数据接收完成，complete();
创建Observable对象的几种情形
- 通过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');
}
});
- 通过counter创建
import {interval} from 'rxjs';
//创建一个将要在计时器上发布值的Observable
const secondsCounter = interval(1000);
//开始发布值
secondsCounter.subscribe(n =>
console.log(`It is been ${n} seconds since subscribeing`));
- 通过事件创建
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文件
//ts文件
@Component({
selector: 'zippy',
template: `
Toggle
();
@Output() close = new EventEmitter();
toggle() {
this.visible = !this.visible;
if (this.visible) {
this.open.emit(null);
} else {
this.close.emit(null);
}
}
- HttpClient:它从 HTTP 方法调用中返回了可观察对象。例如，http.get(‘/api’) 就会返回可观察对象
getHeroes(): Observable {
// this.messageService.add('HeroService:fetched heroes');//发送数据到缓存中
// return of(HEROES);
// 这里可以改成HttpClient.get这里也会返回一个Observable
// 采用RxJS中的of()方法模拟获取数据
return this.http.get(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官方文档