如何组合相似的 rxjs 流？答案

【问题标题】：How to combine the similar rxjs streams?如何组合相似的 rxjs 流？
【发布时间】：2023-04-03 17:10:02
【问题描述】：

我有以下 RXJS 流：

    this.widthBorder$.pipe(skip(1)).subscribe((value) => {
        this.registryBoundaries.setAttribute('stroke-width', `${value || 0}`);
    });

    this.widthBorderColor$.pipe(skip(1)).subscribe((value) => {
        this.registryBoundaries.setAttribute('stroke', `${value || 0}`);
    });

    this.drawContour$.pipe(skip(1)).subscribe((value) => {
        this.registryBoundaries.style.display = value ? 'block' : 'none';
    });

如您所见，有类似skip(1) 的代码重复，还有类似的方法吗？

我跳过第一个值，因为所有流都是BehaviorSubject。

如何优化？

【问题讨论】：

标签： angular rxjs

【解决方案1】：

对于这种情况，您似乎应该使用Subject 而不是BehaviorSubject。 Subject 不会在订阅时发出初始值，这将使您无需使用 skip 运算符。

对于从多个 observables 读取，没有神奇的解决方案。您可以使用zip 之类的东西，因此您有一个可观察对象的发射值数组（但您必须使用 startWith(null) 对每个可观察对象进行管道传输，以便它们发出一个值，因为 zip 只会在所有可观察对象都发出后才发出）。您也可以使用merge 将所有可观察对象简单地融合为单个可观察对象，但除非您添加某种标签，否则您将无法判断哪个可观察对象发出了接收到的值。

我认为一旦您从 BehaviorSubject 切换到 Subject 并删除所有跳过运算符，您的实现就很好了。如果您还有十个这样的订阅，我建议您以编程方式创建 observable，但是对于三个订阅，没有什么可以为您节省很多代码行。

【讨论】：

【解决方案2】：

只需使用Subject 而不是BehaviorSubject

行为主体

BehaviourSubject 将返回订阅的初始值或当前值

主题

主题不返回订阅的当前值。它仅在 .next(value) 调用时触发并返回/输出值

public widthBorder$ = new Subject();
public widthBorderColor$ = new Subject();
public rawContour$ = new Subject();

this.widthBorder$.subscribe(v => this.setAttribute('stroke', `${v || 0}`));

this.widthBorderColor$.subscribe(v => this.setAttribute('stroke-width', `${v || 0}`));

this.drawContour$.subscribe((value) => {
    this.registryBoundaries.style.display = value ? 'block' : 'none';
});

public setAttribute(attr: string, value: string): void {
    this.registryBoundaries.setAttribute(attr, value);
}

【讨论】：