Question

我有一个搜索表单输入。当用户在搜索输入中输入内容时，我需要调用2个单独的api。这就是我想要实现的目标：

myInput: new FormControl();
listOne: Observable<string[]>;
listTwo: Observable<string[]>;

ngOnInit(){
    this.listOne = this.myInput.valueChanges
                     .debounceTime(500)
                     .distinctUntilChanged()
                     .switchMap(myInput => this._service.getListOne(myInput));

    this.listTwo = this.myInput.valueChanges
                     .debounceTime(500)
                     .distinctUntilChanged()
                     .switchMap(myInput => this._service.getListTwo(myInput));
}

所以我的问题是，如何订阅valueChanges并调用2个不同的api来填充2个不同的数组？使用上面的代码，它在初始搜索时效果很好，但是当我更改搜索文本时，只调用getListTwo。

Answer 1

每当一个源有多个订阅者，并且您希望这些订阅者从该源读取相同的值（换句话说，您希望多播源值到多个订阅者），您应该{{ 1}}。

这意味着：share，例如：

sharedSource = this.myInput.valueChanges.debounceTime(500).distinctUntilChanged().share()

您可以查看多播与冷流的详细解释here。

Answer 2

ngOnInit(){
  input$ = this.myInput.valueChanges.debounceTime(500)
                         .distinctUntilChanged()
                         .share();

  this.listOne = input$.switchMap(myInput => this._service.getListOne(myInput));
  this.listTwo = input$.switchMap(myInput => this._service.getListTwo(myInput));

  //store subscriptions
  this.subs$.push(input$,this.listOne,this.listTwo);
}

请记得取消订阅以避免内存泄漏：

ngOnDestroy(){
    this.subs$.forEach(s => s.unsubscribe());
}

Angular2 observables我需要分享

2 个答案: