使用Observable

让我们来看看如何在Angular 2组件中创建和使用Observable的一个基本示例：

  1. import {Component} from '@angular/core';
  2. import {Observable} from 'rxjs/Observable';
  4. @Component({
  5.     selector: 'app',
  6.     template: `
  7.       <b>Angular 2 Component Using Observables!</b>
  9.       <h6 style="margin-bottom: 0">VALUES:</h6>
  10.       <div *ngFor="let value of values">- {{ value }}</div>
  12.       <h6 style="margin-bottom: 0">ERRORs:</h6>
  13.       <div>Errors: {{anyErrors}}</div>
  15.       <h6 style="margin-bottom: 0">FINISHED:</h6>
  16.       <div>Finished: {{ finished }}</div>
  18.       <button style="margin-top: 2rem;" (click)="init()">Init</button>
  19.     `
  20. })
  21. export class MyApp {
  23.   private data: Observable<Array<number>>;
  24.   private values: Array<number> = [];
  25.   private anyErrors: boolean;
  26.   private finished: boolean;
  28.   constructor() {
  29.   }
  31.   init() {
  32.       this.data = new Observable(observer => {
  33.           setTimeout(() => {
  34.               observer.next(42);
  35.           }, 1000);
  37.           setTimeout(() => {
  38.               observer.next(43);
  39.           }, 2000);
  41.           setTimeout(() => {
  42.               observer.complete();
  43.           }, 3000);
  44.       });
  46.       let subscription = this.data.subscribe(
  47.           value => this.values.push(value),
  48.           error => this.anyErrors = true,
  49.           () => this.finished = true
  50.       );
  51.   }
  53. }

首先我们从rxjs / Observable中将Observable导入到我们的组件中。 接下来，在我们的构造函数中，我们创建一个新的Observable。 请注意，这将创建一个包含数字类型数据的Observable数据类型。 这说明Observable提供的数据流，以及使我们能够维护我们期望接收的数据类型的完整性。
接下来我们调用这个Observable的subscribe，它允许我们监听任何数据。 在订阅中，我们使用三个不同的回调：第一个在接收新值时被调用，第二个在出现的任何错误时调用，最后一个表示当传入数据的序列完成并成功时被调用的函数。
我们还可以使用forEach监听传入的数据。 forEach和subscribe之间的关键区别在于如何处理错误和完成回调。 forEach调用只接受“下一个值”回调作为参数; 它然后返回promise而不是订阅。
当Observable完成时，promise解析。 当Observable遇到错误时，promise被拒绝。

你可以认为Observable.of（1，2，3）.forEach（doSomething）在语义上等同于：

  1. new Promise((resolve, reject) => {
  2.   Observable.of(1, 2, 3).subscribe(
  3.     doSomething,
  4.     reject,
  5.     resolve);
  6. });
  7. The forEach pattern is useful for a sequence of events you only expect to happen once.
  8. export class MyApp {
  10.   private data: Observable<Array<number>>;
  11.   private values: Array<number> = [];
  12.   private anyErrors: boolean;
  13.   private finished: boolean;
  15.   constructor() {
  16.   }
  18.   init() {
  19.       this.data = new Observable(observer => {
  20.           setTimeout(() => {
  21.               observer.next(42);
  22.           }, 1000);
  24.           setTimeout(() => {
  25.               observer.next(43);
  26.           }, 2000);
  28.           setTimeout(() => {
  29.               observer.complete();
  30.           }, 3000);
  32.           this.status = "Started";
  33.       });
  35.       let subscription = this.data.forEach(v => this.values.push(v))
  36.             .then(() => this.status = "Ended");
  37.   }
  39. }