Angular中的可观察对象

Angular中的可观察对象

参考文档：https://angular.cn/guide/observables-in-angular

 

Angular使用可观察对象作为处理各种常用异步操作的接口。比如：

• EventEmitter类派生自Observable
• HTTP模块使用可观察对象来处理AJAX请求和响应
• 路由器和表单模块使用可观察对象来监听对用户输入事件的响应

 

在组件之间传递数据

Angular提供了一个EventEmitter类，它用来通过组件的@Output()装饰器发送一些值。

EventEmitter扩展了RxJS Subject，并添加了一个emit()方法，这样它就可以发送任意值了。

当你调用emit()时，就会把所有发送的值传给订阅上来的观察者的next()方法。

 

下面这个范例组件监听了open和close事件

<zippy (open)="onOpen($event)" (close)="onClose($event)"></zippy>

 

zippy.component.ts

import { Component, Output, EventEmitter } from '@angular/core';

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

 

HTTP

Angular的HttpClient从HTTP方法调用中返回了可观察对象。例如，http.get('/api')就会返回可观察对象。相对于基于promise的HTTP API，它有一系列优点：

可观察对象不会修改服务器的响应（和在promise上串联起来的.then()调用一样）。反之你可以使用一系列操作符来按需转换这些值。

HTTP请求是可以通过unsubscribe()方法来取消的

请求可以进行配置，以获取进度事件的变化

失败的请求很容易重试。

 

Async 管道

AsyncPipe会订阅一个可观察对象或promise，并返回其发出的最后一个值。当发出新值时，该管道就会把这个组件标记为需要进行变更检查的（可能导致刷新界面）

下面的例子把time这个可观察对象绑定到了组件的视图中。这个可观察对象会不断使用当前时间更新组件的视图。

@Component({
  selector: 'async-observable-pipe',
  template: `<div><code>observable|async</code>:
       Time: {{ time | async }}</div>`
})
export class AsyncObservablePipeComponent {
  time = new Observable<string>(observer => {
    setInterval(() => observer.next(new Date().toString()), 1000);
  });
}

 

路由器（router）

Router.events以可观察对象的形式提供了其事件。你可以使用RxJS中的filter()操作符来找到感兴趣的事件，并且订阅它们，以便根据浏览过程中产生的事件序列做出决定。

例如：

    constructor(private router: Router) {
        this.navStart = router.events.pipe(
            filter(evt => evt instanceof NavigationStart)
        ) as Observable<NavigationStart>;
    }
    ngOnInit() {
        this.navStart.subscribe(evt => console.log('Navigation Started!'))
    }

 

ActivatedRoute是一个可注入的路由器服务，它使用可观察对象来获取关于路由路径和路由参数的信息。比如，ActivatedRoute.url包含一个用于汇报路由路径的可观察对象。

 

 

响应式表单（reactive forms）

响应式表单具有一些属性，它们使用可观察对象来监听表单控件的值。FormControl的valueChanges属性和statusChanges属性包含了会发出变更事件的可观察对象。订阅可观察的表单控件属性是在组件类中触发应用逻辑的途径之一。比如：

import { Component, OnInit } from "@angular/core";
import { FormGroup } from '@angular/forms';

@Component({
    selector: 'page-events',
    template: '<h1>Events</h1>'
})
export class EventsPage 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)
        );
    }
}