在带有输入输入框的搜索/过滤服务中，我们总是考虑如何减少发起请求的频率，并尝试使每个请求都有效。节流和防抖是常见的做法，这类功能的实现并不难，但还是需要自己打包。Rxjs提供了各种运算符，可以快速高效地实现这些功能。

栗子

现在有一个查询场景，可以按城市、类型、关键字多维度过滤结果，如下图所示：

处理思路：

1.通过ngModel将选择和输入的值绑定到模型中的过滤条件对象

2.监控选择输入框的变化事件和输入输入框的输入事件，触发发送过滤条件的功能

3.创建一个发送过滤条件的主题，然后通过操作符执行图像稳定器和前后值的比较。订阅此主题，仅在有效的过滤条件可用时发送请求和提取数据。

值绑定和事件侦听：

选择名称=' city ' id=' city '[(ng model)]=' config . city code '(change)=' filter list()'选项[值]=' city . value ' * ngforr=' let city of city list ' { city . name } }/选项/选择选择名称=' type ' id=' type '[(ng model)]=' config . area type '(change)=' filter list()'选项值=' all/选项值=' TRAFFIC ' TRAFFIC/选项值=' TRAVEL ' TRAVEL/选项/选择输入类型=' text' class 'Type=文本类型输入在失焦时会触发变化事件，而输入事件只要值发生变化就会触发(这里不考虑IE兼容性)

处理功能：

//用于传递配置项public $ filter=new Subjectany()；//filter condition public config 3360 filter config={ city code : ' '，areatype3360 ' '，name : ' ' }；NgOnInit() {//听过滤器配置项这个。$ filter.pipe(去抖时间(500)，DistinctuntilChanged((n 3360 filter config，o : filter config): boolean={ return n . name===o . name n . city code===o . city code n . area type===o . area type；}) ).subscribe(_ config={ this . getregionlist(_ config))；});} filterList() {//每次发送一个新对象，否则这个的值。$ filter。下一个(对象。分配({}，这个。config))将一直进行比较；} getRegionList (_config) {//发送请求更新区域数据控制台. log(_ config)；}需要注意的是，当$filter通过过滤条件时，它必须发送一个新的对象，否则distinctUntilChanged的compare函数会一直认为没有变化，因为它比较的是同一个对象，所以不会继续扩散。因为配置对象的值是简单的字符串类型，所以可以直接使用Object.assign。如果该值是一个对象类型，您需要自己创建一个简单的深度复制工具函数

摘要

主要思想是通过Subject发送过滤条件，这样就可以使用rxjs的各种运算符，速度要快得多。比较对象时，需要自定义distinctUntilChanged运算符的比较函数，因此需要注意不要传递同一个对象。

摘要

以上是边肖介绍的在Angular搜索场景中使用rxjs的算子处理思路。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！