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

Question

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

我正在 Angular 6 和 Ngrx 中为对话框“表单”实现自动保存功能(这种情况下不使用，但它会在单击时通过某些操作更改状态)，条件如下:

• 如果更改(选择)任何元素，它会触发 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();

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

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

Answer 1

你可以使用 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>