Angular2 创建与使用Observable
来源:互联网 发布:柯洁评论黑嘉嘉 知乎 编辑:程序博客网 时间:2024/05/18 16:38
原文链接:https://angular-2-training-book.rangle.io/handout/observables/using_observables.html
Using Observables
Let’s take a look at a basic example of how to create and use an Observable
in an Angular component:
import {Component} from '@angular/core';import {Observable} from 'rxjs/Observable';@Component({ selector: 'app', template: ` <b>Angular Component Using Observables!</b> <h6 style="margin-bottom: 0">VALUES:</h6> <div *ngFor="let value of values">- {{ value }}</div> <h6 style="margin-bottom: 0">ERRORs:</h6> <div>Errors: {{anyErrors}}</div> <h6 style="margin-bottom: 0">FINISHED:</h6> <div>Finished: {{ finished }}</div> <button style="margin-top: 2rem;" (click)="init()">Init</button> `})export class MyApp { private data: Observable<Array<number>>; private values: Array<number> = []; private anyErrors: boolean; private finished: boolean; constructor() { } init() { this.data = new Observable(observer => { setTimeout(() => { observer.next(42); }, 1000); setTimeout(() => { observer.next(43); }, 2000); setTimeout(() => { observer.complete(); }, 3000); }); let subscription = this.data.subscribe( value => this.values.push(value), error => this.anyErrors = true, () => this.finished = true ); }}
View Example
First we import Observable
into our component from rxjs/Observable
. Next, in our constructor we create a new Observable
. Note that this creates an Observable
data type that contains data of number
type. This illustrates the stream of data that Observables
offer as well as giving us the ability to maintain integrity of the type of data we are expecting to receive.
Next we call subscribe
on this Observable
which allows us to listen in on any data that is coming through. In subscribing we use three distinctive callbacks: the first one is invoked when receiving new values, the second for any errors that arise and the last represents the function to be invoked when the sequence of incoming data is complete and successful.
We can also use forEach
to listen for incoming data. The key difference between forEach
and subscribe
is in how the error and completion callbacks are handled. The forEach
call only accepts the ‘next value’ callback as an argument; it then returns a promise instead of a subscription.
When the Observable
completes, the promise resolves. When the Observable
encounters an error, the promise is rejected.
You can think of Observable.of(1, 2, 3).forEach(doSomething)
as being semantically equivalent to:
new Promise((resolve, reject) => { Observable.of(1, 2, 3).subscribe( doSomething, reject, resolve);});
The forEach
pattern is useful for a sequence of events you only expect to happen once.
export class MyApp { private data: Observable<Array<number>>; private values: Array<number> = []; private anyErrors: boolean; private finished: boolean; constructor() { } init() { this.data = new Observable(observer => { setTimeout(() => { observer.next(42); }, 1000); setTimeout(() => { observer.next(43); }, 2000); setTimeout(() => { observer.complete(); }, 3000); this.status = "Started"; }); let subscription = this.data.forEach(v => this.values.push(v)) .then(() => this.status = "Ended"); }}
View Example
</section>
- Angular2 创建与使用Observable
- 在Angular2中使用Observable对象
- RxJava使用小总结:Observable的创建方式、过滤Observable
- Angular2 之 Promise vs Observable
- RxJava(二:Observable 创建,组合与过滤)
- Angular2学习笔记——Observable
- Angular2学习:Subject和Observable 文章标题
- angular2中服务的创建和使用
- rxJava的使用--Observable的创建及源码分析(一)
- rxJava的使用--Observable的创建及源码分析(二)
- rxJava的使用--Observable的创建及源码分析(三)
- TypeScript的使用(与Angular2搭配)
- Observable与Observer
- Observable与Observer
- Observable与Observer
- Observable与Observer
- Observer与Observable
- Observer与Observable
- CodeForces 75C(最大公约数)
- glibc源码分析之utime系列函数
- CSDN-markdown基本语法说明
- 1061: 顺序输出各位数字
- Nginx 启动或重启失败原因总结及解决办法
- Angular2 创建与使用Observable
- 数据结构实验之二叉树二:遍历二叉树
- MyBatis的foreach语句详解
- 2017多校6 1003 Inversion
- 排序之冒泡排序
- Spring Boot启动过程源码分析
- Ruby操作MongoDB数据库(进阶十二)--GridFS
- 【POJ3252】 Round Numbers
- Accurate Single Stage Detector Using Recurrent Rolling Convolution