与 RxJS 流冲突的条件语句答案

【问题标题】：Conflicting Conditional Statement with RxJS streams与 RxJS 流冲突的条件语句
【发布时间】：2020-04-01 12:43:06
【问题描述】：

我在 UI 上有两个选项卡，它们都需要某些验证。

第一个选项卡 - 帐户 ID（必需）

第二个选项卡 - 帐户 ID + 值列表中的至少 1 个选项。（两者都需要）

提交按钮默认是禁用的，只有在满足验证条件时才会启用。

第一次在第一个标签上 - 按预期工作。填写帐号时启用，为空时禁用

第一次在第二个标签上 = 按预期工作。填写帐户 ID 并选择至少一项时启用，不满足任何条件时禁用。

现在，当您返回第一个选项卡时 - 事情开始失败。主要是因为两个流都处于活动状态。如何停止/过滤流并使其按照所选选项卡工作？

这里的最小复制 - Minimal Demo for issue ( app.component.ts)

有人可以看看并指出正确的方向吗？

谢谢

【问题讨论】：

您能否也添加预期的行为？ “验证自行工作”和“他们停止工作”这两个词并不能很好地说明期望是什么。
嗨@SiddAjmera - 更新了帖子，也有复制品。如果可能的话，请看一看。谢谢
知道了，谢谢。 :) 我正在调查。
嘿@SiddAjmera - 运气好吗？我快到了。一会儿再发。
@SiddAjmera - 看看。已发布答案

标签： javascript angular typescript ecmascript-6 rxjs

【解决方案1】：

所以，我以不同的方式思考它。我最终可能要做的是确定一旦选择了 ui 上的选项卡，哪个流就会出现。因此，在每次选项卡更改时，我都会有不同的流，它会按需要工作。此处提供演示 - https://stackblitz.com/edit/angular-rmkfvp

但是，如果/else 通过一些 rxjs 操作符或者这个 sn-p 看起来没问题，有没有更好的方法来做到这一点？

 overallValidator$ = this.selectedDomain$.pipe(
    tap(() => console.info('--- Inside tap')),
    switchMap((item) => {
      if (item === this.AML) {
        return this.amlDomainValidator$;
      }
      return this.otherDomainValidator$;
  })
);

【讨论】：

【解决方案2】：

您可以使用iif

// RxJS v6+
import { iif, of, interval } from 'rxjs';
import { mergeMap } from 'rxjs/operators';

const r$ = of('R');
const x$ = of('X');

interval(1000)
  .pipe(mergeMap(v => iif(() => v % 4 === 0, r$, x$)))
  .subscribe(console.log);

// output: R, X, X, X, R, X, X, X, etc...

【讨论】：