在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我不是像往常一样返回Observable ,而是需要将此HTTP调用链接到另一个readySourceObservable,该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