在Angular 2中链接RxJs Observables

Question

我的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.get一样返回http.get Observable，而是需要将此HTTP调用链接到另一个readySource Observable，指示API是否已准备好调用（它实际上检查后台数据同步作业是否已完成）。

如何将这两个Observable链接在一起，因此只有在readySource推送特定值（例如“ready”）后才会调用HTTP调用？

（注意，vanilla flatMap / selectMany在这里并不完全符合要求，因为我需要等到第一个Observable在调用第二个之前推送一个特定的值。）

Answer 1

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

@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