Question

对于我现在遇到的用例，我需要一些帮助：

我正在Angular 6和Ngrx中为对话框“窗体”实现自动保存功能（这种情况不使用，但是单击时会通过某些操作更改状态），

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

目前，对于第一种情况，我有以下可观察的结果：

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

注意：skip(1)仅在组件初始化时跳过第一个发射

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

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

对于Observable运算符，如果this.configuration$中可观察的值发生了变化，是否有任何方法可以将两者结合起来并限制发射？

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

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>

Answer 2

您要使用race。例如race(observableOne$, observableTwo$)将仅发出第一个Observable的值以发出值。

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

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

2 个答案: