En nuestra aplicación Angular, usamos con bastante frecuencia distintUntilChanged() y estamos en un punto en el que queremos usarlo para comparar form.valueChanges directamente. Como se describe en esta pregunta: https://stackoverflow.com/a/53825991/1003686 usar distintUntilChanged en form.valueChanges no funcionará correctamente:
this.myFormControl.valueChanges .pipe(distinctUntilChanged()) .subscribe(newValue => { console.log('fires endlessly'); });y en su lugar, tengo que escribirlo así para que funcione una comparación muy básica.
this.searchAndFilterForm.valueChanges .pipe(distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b)) .subscribe(newValue => { console.log('fires only on real changes'); }); No quiero definir una comparación personalizada en cada cambio de valor de formulario y, en cambio, quiero tener un nuevo operador Pipe llamado formDistinctUntilChanged() que pueda usar y refactorizar si es necesario.
Vi que distinctUntilChanged() es un MonoTypeOperatorFunction . ¿Cómo puedo implementar una MonoTypeOperatorFunction personalizada para obtener un operador formDistinctUntilChanged() ? Preferiblemente, solo use el distinctUntilChanged() con una comparación predefinida.
Básicamente, estoy buscando algo que esté haciendo lo mismo que el distintivo normal Hasta que pero con una comparación predefinida que pueda reutilizar en múltiples componentes.
this.myFormControl.valueChanges .pipe(formDistinctUntilChanged()) .subscribe(newValue => { console.log('fires only on real changes'); }); Crear un operador rxjs personalizado como se describe en https://tane.dev/2021/01/creating-custom-rxjs-operators/ realmente no funciona en mi entorno angular porque tenemos eslint(prefer-arrow/prefer-arrow -functions) definido y no entiendo completamente cómo usar otra MonoTypeOperatorFunction en una MonoTypeOperatorFunction .
Un operador pipeable es solo una función que acepta un observable y devuelve un observable. Así que podrías usar algo como esto:
const formDistinctUntilChanged = <T>() => (obs$: Observable<T>): Observable<T> => obs$.pipe(distinctUntilChanged(/*your comparator*/));