如何合并RXJS操作符？无法使用combineLatest场景下的流合并方案咨询

解决方案 #

你可以用merge操作符实现需求，它的特性是任意一个源流产生新值时就会触发下游，不需要等待所有源流都完成首次触发，刚好匹配你的使用场景。

实现代码 #

import { merge, map } from 'rxjs';

// 合并后的统一订阅逻辑
merge(
  this.reportPropertiesChanges$.pipe(map(v => ({ prop: 'reportProperties', val: v }))),
  this.objectsProperties$.pipe(map(v => ({ prop: 'reportObjectsProperties', val: v }))),
  this.textPropertiesChanges$.pipe(map(v => ({ prop: 'textProperties', val: v }))),
  this.toggleLabels$.pipe(map(v => ({ prop: 'visibleText', val: v })))
).pipe(
  filter(() => this.loaded)
).subscribe(({ prop, val }) => {
  this.registryReportSettings[prop] = val;
  this.registryReportSettings$.next(this.registryReportSettings);
});

说明 #

• 每个源流提前做映射，把emit的值和要更新的配置属性名绑定，避免订阅内写多分支判断逻辑
• 公共的loaded判断逻辑提取到合并后的流中，减少重复代码
• 后续新增同类监听流，只需要在merge参数中新增对应映射逻辑即可，可维护性更高

内容的提问来源于stack exchange，提问作者user15423370