angular - 链中具有多个 filter() 和 switchMap() 运算符的 Rxjs 管道函数

标签 angular rxjs-pipeable-operators rxjs-filter

我正在重构一些旧的 rxjs 代码,这些代码写得不好,因此存在一些竞争条件。

所以我想根据各种条件使用一系列filter()运算符;但是我需要它来访问这条链上的每个过滤器运算符(operator)。即,如果 Condition1 为 true,则执行下一个 switchMap() - 否则只需执行下一个 filter()。对 Condition2..Condition4 应用相同的逻辑。

此外,我的 selectedNode 需要沿着链发出,因为 getChildNodes() 函数会获取其他子节点并将它们推送到 selectedNode .

现在它只会在遇到第一个 FALSY 条件时退出 - 所以自然地,其余的过滤器永远不会被检查。

如何使 if 在每个条件下都作为旧的 IF...THEN 语句执行?

这是我到目前为止所拥有的:

    constructor(private readonly configSvc: ConfigService) {
        this.model$
            .pipe(
                filter((selectedNode) => !!selectedNode),

                // if condition1 passes, get child nodes of current node.
                filter((selectedNode) => myCondition1),
                switchMap((selNode) => this.getChildNodes(selNode, NodeType.Type1)),

                // if condition2 passes..
                filter((selectedNode) => myCondition2),
                switchMap((selNode) => this.getChildNodes(selNode, NodeType.Type2)),

                // if condition3 passes..
                filter((selectedNode) => myCondition3),
                switchMap((selNode) => this.getChildNodes(selNode, NodeType.Type3)),

                // if condition4 passes, get child nodes...
                filter((selectedNode) => myCondition4),
                switchMap((selNode) => this.getChildNodes(selNode, NodeType.Type4)),

                takeUntil(this.onDestroy),
            )
            .subscribe({
                next: (selectedNode: SelectedNode) => { // init the Network tree and notify listeners
                    this.initNetwork(selectedNode);
                    this.configNodesReadySource.next(selectedNode);
                },
            });
    }

或者也许订阅 mult observables,一个替代想法:

const condition1$ = this.model$.pipe(filter((node) => condition1), switchMap(...);
const condition2$ = this.model$.pipe(filter(...), switchMap(...);
const condition3$ = this.model$.pipe(filter(...), switchMap(...);
const condition4$ = this.model$.pipe(filter(...), switchMap(...);

forkJoin(...).subsribe(...); // join condition1 thru 4 to get final result ???

但是,我似乎也遇到了同样的问题或类似的问题。我从来没有达到订阅。

最佳答案

您可以使用concatMap按照描述实现级联

this.model$
.pipe(
    filter((selectedNode) => !!selectedNode),
    concatMap(selectedNode => myCondition1 ? this.getChildNodes(selectedNode, NodeType.Type1) : of(selectedNode)),
    concatMap(selectedNode => myCondition2 ? this.getChildNodes(selectedNode, NodeType.Type2) : of(selectedNode)),
    concatMap(selectedNode => myCondition3 ? this.getChildNodes(selectedNode, NodeType.Type3) : of(selectedNode)),
    concatMap(selectedNode => myCondition4 ? this.getChildNodes(selectedNode, NodeType.Type4) : of(selectedNode)),
    takeUntil(this.onDestroy),
)
.subscribe({
    next: (selectedNode: SelectedNode) => { // init the Network tree and notify listeners
        this.initNetwork(selectedNode);
        this.configNodesReadySource.next(selectedNode);
    },
});

关于angular - 链中具有多个 filter() 和 switchMap() 运算符的 Rxjs 管道函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70341026/

相关文章:

javascript - 如果我只使用一个运算符,我应该使用管道运算符吗?

Angular 6 过滤异步管道结果

javascript - 如何映射和减少 Firebase List Observable 的子值

angular - ngx-mask 接受负数

javascript - Angular 编译错误 : src/app/login/login. component.ts(18,10): 错误 TS1127: 无效的 > 字符

Angular HttpParams 对象为空

angular - RxJs 在返回的数组上循环