• 使用Observable

    使用Observable

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

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

    首先我们从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 {
    9. private data: Observable<Array<number>>;
    10. private values: Array<number> = [];
    11. private anyErrors: boolean;
    12. private finished: boolean;
    13. constructor() {
    14. }
    15. init() {
    16. this.data = new Observable(observer => {
    17. setTimeout(() => {
    18. observer.next(42);
    19. }, 1000);
    20. setTimeout(() => {
    21. observer.next(43);
    22. }, 2000);
    23. setTimeout(() => {
    24. observer.complete();
    25. }, 3000);
    26. this.status = "Started";
    27. });
    28. let subscription = this.data.forEach(v => this.values.push(v))
    29. .then(() => this.status = "Ended");
    30. }
    31. }