介绍RxJS在Angular中的应用
RxJS是一种针对异步数据流编程工具,或者叫响应式扩展编程;可不管如何解释RxJS其目标就是异步编程,Angular引入RxJS为了就是让异步可控、更简单。 而今就是要探讨什么是Observable、observer、operator、Submit、EventEmmit,以及如何去使用它们。 什么是Observable?Observable只是一个普通函数,要想让他有所作为,就需要跟observer一起使用;前者是受后者是攻。而这个observer(后面我们会介绍)只是一个带有 当Observable设置观察者后,而连接并获取原始数据的这个过程叫生产者,可能是DOM中的 为了更好理解,先从一个简单的示例开始: import { Component } from '@angular/core'; import { Observable,Subscription } from 'rxjs'; @Component({ selector: 'app-home',template: `<input type="text"> ` }) export class HomeComponent { ngOnInit() { const node = document.querySelector('input[type=text]'); // 第二个参数 input 是事件名,对于input元素有一个 oninput 事件用于接受用户输入 const input$ = Observable.fromEvent(node,'input'); input$.subscribe({ next: (event: any) => console.log(`You just typed ${event.target.value}!`),error: (err) => console.log(`Oops... ${err}`),complete: () => console.log(`Complete!`) }); } } 示例中 什么是observer?observer非常简单,像上面示例中 一般在Angular我们 input$.subscribe((event: any) => { }); 从语法角度来讲和 当Observable产生一个新值时,会通知 observer 的 当Observable被订阅后,除非调用observer的 Observable的生产的值允许经过一序列格式化或操作,最终得到一个有价值的数据给观察者,而这一切是由一序列链式operator来完成的,每一个operator都会产生一个新的Observable。而我们也称这一序列过程为:流。 什么是operator?正如前面说到的,Observable可以链式写法,这意味着我们可以这样: Observable.fromEvent(node,'input') .map((event: any) => event.target.value) .filter(value => value.length >= 2) .subscribe(value => { console.log(value); }); 下面是整个顺序步骤:
你只要记住每一次 operator 都会返回一个新的 Observable,不管 operator 有多少个,最终只有最后一个 Observable 会被订阅。 不要忘记取消订阅为什么需要取消订阅 Observable 当有数据产生时才会推送给订阅者,所以它可能会无限次向订阅者推送数据。正因为如此,在Angular里面创建组件的时候务必要取消订阅操作,以避免内存泄漏,要知道在SPA世界里懂得擦屁股是一件必须的事。 unsubscribe前面示例讲过,调用 ngOnDestroy() { this.inputSubscription.unsubscribe(); } takeWhile如果组件有很多订阅者的话,则需要将这些订阅者存储在数组中,并组件被销毁时再逐个取消订阅。但,我们有更好的办法: 使用 [takeWhile() private alive: boolean = true; ngOnInit() { const node = document.querySelector('input[type=text]'); this.s = Observable.fromEvent(node,'input') .takeWhile(() => this.alive) .map((event: any) => event.target.value) .filter(value => value.length >= 2) .subscribe(value => { console.log(value) }); } ngOnDestroy() { this.alive = false; } 简单有效,而且优雅。 Subject如果说 @Injectable() export class MessageService { private subject = new Subject<any>(); send(message: any) { this.subject.next(message); } get(): Observable<any> { return this.subject.asObservable(); } } 当F组件需要向M组件传递数据时,我们可以在F组件中使用 constructor(public srv: MessageService) { } ngOnInit() { this.srv.send('w s k f m?') } 而M组件只需要订阅内容就行: constructor(private srv: MessageService) {} message: any; ngOnInit() { this.srv.get().subscribe((result) => { this.message = result; }) } EventEmitter其实EventEmitter跟RxJS没有直接关系,因为他是Angular的产物,而非RxJS的东西。或者我们压根没必要去谈,因为EventEmitter就是Subject。 EventEmitter的作用是使指令或组件能自定义事件。 @Output() changed = new EventEmitter<string>(); click() { this.changed.emit('hi~'); } @Component({ template: `<comp (changed)="subscribe($event)"></comp>` }) export class HomeComponent { subscribe(message: string) { // 接收:hi~ } } 上面示例其实和上一个示例中 结论RxJS最难我想就是各种operator的应用了,这需要一些经验的积累。 RxJS很火很大原因我认还是提供了丰富的API,以下是摘抄: 创建数据流:
转换操作:
组合数据流:
另,最好使用 $ 结尾的命名方式来表示Observable,例:input$。 happy coding! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |