自定义 distinctUntilChanged 实现

Question

在我们的 Angular 应用程序中，我们经常使用 distinctUntilChanged() 并且我们正处于想要使用它直接比较 form.valueChanges 的时刻。如这个问题所述：在 form.valueChanges 上使用 distinctUntilChanged 将无法正常工作：

this.myFormControl.valueChanges
  .pipe(distinctUntilChanged())
  .subscribe(newValue => {
    console.log('fires endlessly');
  });

相反，我必须这样写才能进行非常基本的比较。

this.searchAndFilterForm.valueChanges
  .pipe(distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b))
  .subscribe(newValue => {
    console.log('fires only on real changes');
  });

我不想在每个表单值更改上定义自定义比较，而是我想要一个名为 formDistinctUntilChanged() 的新管道运算符，我可以在需要时使用和重构它。

我看到distinctUntilChanged()是一个MonoTypeOperatorFunction。如何实现自定义 MonoTypeOperatorFunction 以便获得 formDistinctUntilChanged() 运算符？最好只使用带有预定义比较的普通 distinctUntilChanged()。

基本上我正在寻找与普通 distinctUntil 功能相同但具有预定义比较的东西，我可以在多个组件中重复使用。

this.myFormControl.valueChanges
  .pipe(formDistinctUntilChanged())
  .subscribe(newValue => {
    console.log('fires only on real changes');
  });

像 https://tane.dev/2021/01/creating-custom-rxjs-operators/ 中描述的那样创建自定义 rxjs 运算符在我的 angular 环境中实际上不起作用，因为我们定义了 eslint(prefer-arrow/prefer-arrow-functions) 而我不完全理解如何在 MonoTypeOperatorFunction.

中使用另一个 MonoTypeOperatorFunction

Answer 1

管道运算符只是一个接受可观察对象和 returns 可观察对象的函数。所以你可以使用这样的东西：

const formDistinctUntilChanged =
  <T>() =>
  (obs$: Observable<T>): Observable<T> =>
    obs$.pipe(distinctUntilChanged(/*your comparator*/));

自定义 distinctUntilChanged 实现

Custom distinctUntilChanged implementation

angular

rxjs-pipeable-operators