使用 rxjs 实现类似寄存器的行为

Question

我对 rxjs 和声明性编程非常陌生，所以如果这是一个愚蠢的问题，我深表歉意！

我在 Typescript 中尝试实现与数字寄存器类似的行为，因为我有两个输入布尔可观察量，比方说 A 和 B，以及一个输出寄存器 O（也是布尔值）

功能：

1. O 应该以默认值“false”开头
2. 当 B 从 FALSE 变为 TRUE 时，O 应该用 A 的当前值更新自身
3. 在所有其他情况下，O 的当前值应保持静态

我想做的是，当 B 变为 true 时，保存 A 的值，以便当 B 再次变为 false 时我可以使用 A 的值

我已经看到了这个问题，但我无法弥合它的答案与我的要求之间的差距

我认为我可以在B上使用pairwise()来检测B从FALSE变为TRUE时的情况(previousValue === false && currentValue === true)结合withLatestFrom来查询A的当前值并更新O 的值。

我不明白的是，在所有其他情况下，我如何可以重新发出/保留 O 的当前值。据我所知，在定义 Observable O 时，无法在管道运算符内判断，参考其当前值

Answer 1

保持简单，使用单个流和一个存储寄存器状态的变量。

---

我们首先创建两个复选框来记录 A 和 B 操作，C 来显示输出。

A: <input type="checkbox" id="A" /><br />
B: <input type="checkbox" id="B" /><br />
<div id="C">false</div>

我们使用 javascript 获取元素。

const a: any = document.getElementById('A') as HTMLElement;
const b: HTMLElement = document.getElementById('B') as HTMLElement;
const c: HTMLElement = document.getElementById('C') as HTMLElement;

使用

fromEvent

和

map

，我们监听复选框单击，并使用

checked

仅获取事件的

map

属性。

const checkboxStream = (element: any) => {
  return fromEvent(element, 'input').pipe(
    map((event: any) => event?.target?.checked)
  );
};

之后，我们监听

input

事件并订阅来自 B 的事件，因为这是存储复选框值的触发器。

一个简单的 if 条件，当 b 为 true 时将更新寄存器的状态 (

registerState

)，否则保留寄存器状态。

let registerState = a.checked;
checkboxStream(b)
  .pipe(
    map((bChecked: Array<boolean>) => {
      if (bChecked) {
        registerState = a.checked;
      }
      return registerState;
    })
  )
  .subscribe((cChecked: boolean) => {
    c.innerText = cChecked.toString();
    console.log(cChecked);
  });

Stackblitz 演示