在 Angular 2 中链接 RxJs Observables答案

【问题标题】：Chaining RxJs Observables in Angular 2在 Angular 2 中链接 RxJs Observables
【发布时间】：2016-09-07 21:58:24
【问题描述】：

我的 Angular 2 应用程序中有一个 TypeScript 函数，它返回一个 Observable，将 Web API 数据推送回消费者，如下所示：

public getApiData(): Observable {
    let readySource = Observable.from('no', 'no', 'ready');
    let dataSource = http.get('api/getData');
    // ... magic here
    return chainedObservable;
}

但是，我需要将此 HTTP 调用链接到另一个指示 API 是否准备好调用的 readySource Observable，而不是正常返回 http.get Observable（它实际上检查后台数据同步作业是否已完成)。

我如何将这两个 Observable 链接在一起，所以只有在 readySource 推送特定值时才会调用 HTTP 调用，例如“准备好”了吗？

（请注意，vanilla flatMap/selectMany 并不能完全满足这里的要求，因为我需要等到第一个 Observable 推送特定值后才能调用第二个。）

【问题讨论】：

标签： typescript angular reactive-programming rxjs

【解决方案1】：

我会将filter 运算符与flatMap 混合使用。以下示例描述了当用户填写特定值（此处为“就绪”）时如何触发请求：

@Component({
  selector: 'my-app',
  template: `
    <input [ngFormControl]="ctrl"/>
    <button (click)="onClick()">Click</button>
  `
})
export class AppComponent {
  constructor(private http:Http) {
    this.ctrl = new Control();
    let readySource = this.ctrl.valueChanges.filter((val) => val === 'ready');
    readySource.flatMap(() => http.get('data.json')).subscribe(() => {
      console.log('test');
    });
  }
}

看到这个 plunkr：https://plnkr.co/edit/yZL1wRw7GYhUkkhnL9S0?p=preview

【讨论】：