类别:运营商

我们的每周RxJs操作符是withLatestFrom它是一个名字能说明一切的操作符的罕见例子。

这是大理石图为withLatestFrom：

这个运算符取两个或多个可观察对象然后把它们变成一个可观察对象的时候，就会产生一个新值source Observable会释放一些新的东西．

这里需要注意的重要一点是，只有一个Observable在输出Observable中触发更新。结果，withLatestFrom当您希望用户操作触发用户界面中的更新时(考虑数据表过滤器、相互连接的下拉列表等)，是一个很好的选择。

你可以看到现场直播代码示例(包括解释思维过程的注释)，两个相互依赖的下拉列表。第一个下拉列表中的选择会影响第二个下拉列表中显示的值(选择一个大洲会过滤掉第二个下拉列表中显示的国家:

如果你想深入了解，我有这个关于使用的完整教程withLatestFrom与其他操作符一起在组件中实现动态过滤．

更多的RxJs内容，我的2小时RxJS工作坊从ng-conf 2022现在可以在Youtube上免费观看!

的利用运算符是最简单的一种RxJs操作符，因为它不会改变进入你的可观察对象的数据:

为什么我们需要一个什么都不做的函数呢?我们看到了第一个非常重要的例子，使我们能够使用异步管早些时候。

至少有三个重要的用例是:

• 调试复杂的RxJs场景使用console.log(如上图所示)
• 注册副作用随着数据的变化(这就是我们在异步管道场景中所做的)
• 看用于完成内部可观察对象(当您将多个可观察对象组合到一个订阅时)

简而言之,利用是一种方法监视可观察流内部发生了什么。任何时候你想要提取一些数据/调试/看看Observable中发生了什么，利用是最简单的答案。

你可以在我的教程中找到这三个场景的例子:使用的3个原因利用操作符．

combineLatest有一个说明一切的名字:操作符将两个或多个可观察对象的最新值组合成一个可观察对象。

这张大理石图完美地说明了这种行为(点击图片可以访问交互式版本):

该操作符有几种可能的用例。最常见的用法是通过组合不同的源来过滤信息，如下图所示RxJs和Angular表单的动态过滤教程，它实现了相当于自动补全文本输入的功能，每当用户输入新字符时，就会显示新的建议。

我们得到了什么combineLatest由组合的可观察对象发出的所有最新值组成的数组。例如，如果我们订阅组合最新(obs1, obs2, obs3)，我们得到的数据是一个数组，包含[lastValueFromObs1, lastValueFromObs2, lastValueFromObs3]．数组中数据的顺序与传递可观察对象的顺序相匹配combineLatest，该数组的值将再次发射，每当其中一个可观察对象再次发射。

一个常见的陷阱combineLatest操作符是否等待所有可观察的源至少发出一个值才返回某个值，因此将它与startWith操作符，如这个例子来自我们之前的教程．

注意:操作符将被重命名为combineLatestWith在RxJs 8+．

Angular应用中常见的一个错误是用以下方式嵌套可观察订阅:

              
              

               observable1.subscribe (数据= >{observable2.subscribe (otherData= >｛//对otherData执行一些操作});})；
              
代码语言:JavaScript（javascript）

不推荐使用上述语法，因为它很难阅读，并且可能导致微妙的错误和意想不到的副作用。例如，这种语法很难正确地取消所有这些可观察对象的订阅。

同样,如果observable1如果在短时间内触发多次，则可能需要取消以前的订阅observable2并根据接收到的新数据开始一个新的observable1．上面的代码没有做任何这些工作。

解决方案:使用RxJsswitchMap这样的运算符:

              

               observable1.pipe (数据= >{switchMap (数据= >observable2) .subscribe (otherData= >｛//对otherData执行一些操作});
              
代码语言:JavaScript（javascript）

的switchMapOperator执行以下所有操作:

• 自动取消和取消订阅observable2如果observable1产生一个新值。
• 自动取消订阅observable2如果我们取消订阅observable1
• 确保observable1和observable2依次发生，一个接一个。

下面的大理石图很好地说明了什么switchMap:

如果你不吸毒的话switchMap但是，请在代码中查找对的嵌套调用.subscribe ()，然后开始用switchMap操作符，以防止内存泄漏和错误，并使您的代码更具可读性。

这里有一个链接一个使用定时器每30秒发出一次HTTP请求的例子获取更新的数据。使用将计时器数据转换为API调用switchMap在示例的第37行。