合并两个 rxjs 流并仅在第一个为真时发出

Question

我需要一些关于我现在卡住的用例的帮助：

我在 Angular 6 和 Ngrx 中实现了一个对话框 'form' 的自动保存功能（这种情况下没有使用，但它会在单击时通过某些操作更改状态），如下所示条件：

如果任何元素被更改（选择），它会触发 30 秒的计时器，用户可以在这段时间内随意更改，当计时器结束时，发出状态。（如果我在这 30 秒之间更改多个输入，将只有一个发射）
如果对话框在 30 秒之前关闭并且表单上的数据已更改，则必须立即保存。

目前，对于第一个案例，我有这个观察结果：

this.configuration$ = this.store.pipe(select(getTopicsList));
this.configuration$
    .pipe(
    distinctUntilChanged(),
    debounceTime(30000),
    skip(1),
).subscribe(res => this.saveCurrent());

注意：skip(1)只是在组件初始化时跳过第一个emit

第二次我将 Subject 转换为 Observable 以在每次关闭对话框时发出一个事件：

this.close$ = this.closeStream.asObservable();

使用 Observable 运算符，如果 this.configuration$observable 发生变化，有什么方法可以结合两者并调节发射？

我在可观察性方面不是那么强，但也许我想得太多了，有一个有效的解决方案。如果有人可以让我了解它，那就太棒了。非常感谢。

Answer 1

您想使用 race。例如 race(observableOne$, observableTwo$) 只会发出第一个发出值的 Observable 的值。

https://www.learnrxjs.io/operators/combination/race.html

Answer 2

您可以使用 race，但必须在表单更改后才能使用。

基本上，每次表单更改时，您都希望在一定延迟后或用户关闭模式后保存它，无论先发生什么。

像这样，如果你想添加一个 Save 按钮而不是在模式关闭时保存表单，它只会被保存一次，直到它再次改变。

应该是这样的：

const {
  Subject,
  of,
  race
} = rxjs;

const {
  distinctUntilChanged,
  skip,
  switchMap,
  delay,
  take
} = rxjs.operators;

let field = 0;

const formSubject = new Subject();
const closeSubject = new Subject();
const formObservable = formSubject.asObservable();
const closeObservable = closeSubject.asObservable();

document.getElementById('change').onclick = () => {
  console.clear();
  
  formSubject.next({ field: ++field });
};

document.getElementById('close').onclick = () => {
  console.clear();
  
  closeSubject.next(true);
};

formObservable.pipe(
  skip(1),
  distinctUntilChanged(),
  switchMap((form) => race(
    of(form).pipe(delay(2000)),
    closeObservable.pipe(take(1)).pipe(switchMap(() => of(form)))
  ))
).subscribe(res => {
  console.log(res);
});

formSubject.next({ field });

<div>
  <button id="change" onclick="change()">CHANGE</button>
  <button id="close" onclick="close()">CLOSE</button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.2.2/rxjs.umd.js"></script>

合并两个 rxjs 流并仅在第一个为真时发出

Combine two rxjs streams and emit only if the first one it's true

operators

rxjs

ngrx

angular