1

在我的应用程序中，我使用的是 NGRX 和 RXJS。我有一个窗口，用户可以通过在文本框中输入自由格式文本或单击页面上的订单项来查看详细信息来过滤订单。

我有两个可观察对象，我想调用我的商店并通过过滤任一方式来获取详细信息，但我想使用 combineLatest 函数来简化我的代码。文本搜索传入一个要搜索的字符串，而单击传入一个数字 id。我的代码中已经有了这个：

//Text search
 this.valueChanges = this.search.valueChanges
      .pipe(debounceTime(170), distinctUntilChanged())
      .subscribe(value => {
        this.hasValue = value.length > 0;
        this.store$.dispatch(new QueryAction({ value }));
      });

//Item click
      this.clickChanges = this.selected$.subscribe(value => {  
        let Id = value.id.toString();    
        this.store$.dispatch(new QueryAction({ value: Id }));
      });

我的问题是如何简化此代码以使用 combineLatest，因为两者都是非常相似的操作，并且执行搜索存储在商店中的项目以根据输入的文本进行过滤。

4

1 回答 1

0

我将分两部分回答这个问题，你想结合两个流并触发应该相当简单的 QueryAction

const searchStream =  this.search.valueChanges
  .pipe(debounceTime(170), 
        distinctUntilChanged(), 
        filter(value => value.length > 0)
        );
const clickStream = this.selected$.pipe(map(value => value.id.toString());
merge(searchStream, clickStream)
.pipe(tap(value => this.store$.dispatch(new QueryAction({ value: value }), 
      takeWhile(() => !destroy) // make destroy= true in ngOnDrestroy()
).subscribe();

注意我使用merge而不是combineLatest，这是因为后者会期望两个流在它允许触发动作之前产生一些东西，并且你会收到这两个值，你想要的是搜索或点击产生一个事件然后动作应该触发，这就是我使用合并的原因。

现在我建议你修改你处理这个问题的方式，不确定你是否读过关于愚蠢与聪明的哲学，如果你没有在使用ngrx时有很大帮助，请用谷歌搜索，检查ngrx示例应用程序https： //github.com/ngrx/platform/tree/master/example-app，对我来说这是最好的文档。
如果我很好地理解了您想要实现的目标，我将有一个用于输入搜索的哑组件（我想象的是一种自动完成项目的建议框），当通过单击或输入选择选项时输出查询事件，并且项目列表页面将是另一个在单击时输出查询事件的哑组件，每个事件将绑定到容器（智能组件）中的相同方法，该方法将调度 QueryAction 希望对您有所帮助

于 2018-06-03T17:27:59.607 回答