angular--Observable总结

为什么80%的码农都做不了架构师？>>>   

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');
    	}
	});

2. 通过counter创建

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

3. 通过事件创建

	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官方文档

转载于:https://my.oschina.net/hyzccc/blog/1841860