1
votes

Extraire l'opérateur canalisable en tant que fonction dans RXJS

J'ai le code suivant

  myExhaust(obs: Observable<any>): Observable<{ someValue: SomeClass }> {
    return obs.pipe(
      exhaustMap((val) => { 
           // do some stuff
           return of({someValue})
      })
    );
  }

Maintenant, ce code dans exhaustMap est répété dans plusieurs composants et j'aimerais l'extraire en tant que fonction externe.

J'ai essayé ce qui suit

this.form.valueChanges.pipe(
    take(1),
    map(val => // doSomething),
    exhaustMap(val => 
      // someInner observable logic
      return of({someValue})
    )
).subscribe(finalVal => doSomething());

Mais alors je ne sais pas comment le brancher dans le code d'origine (que si le code de fonction lui-même est correct)

typescript angular rxjs

0 commentaires

3 Réponses :

3
votes

Vous créez essentiellement un opérateur personnalisé. Tu es sur la bonne piste. Vous devez créer une fonction qui prend une observable et en renvoie une nouvelle.

function myExhaust<T>(): MonoTypeOperatorFunction<T> {
    return input$ => input$.pipe(
       exhaustMap((val) => { 
           // do some stuff
           return of({someValue})
       }))
}

Vous pouvez maintenant utiliser myExhaust au lieu d'exaustMap dans votre pipe.

1 commentaires

Qu'en est-il du passage des paramètres à l'opérateur personnalisé?

0
votes

Vous pouvez créer une fonction partagée standard avec cette logique et l'utiliser dans n'importe quel composant:

// set appropriate generic types for your case
// it's just an example 
export function fun<T>(data: T): Observable<T> {
  // do your stuff
  return of<T>(data);
}

// usage
this.form.valueChanges
  .pipe(
    take(1),
    map(val => // doSomething),
    exhaustMap(val => fun(val))
  )
  .subscribe(finalVal => doSomething());

Mais si vous devez combiner cette logique uniquement avec l'opérateur exhaustMap , vous avez besoin d'un opérateur canalisable personnalisé.

0 commentaires

1
votes

Votre utilitaire semble bien et voici comment vous pouvez le transmettre au tube:

this.form.valueChanges.pipe(
take(1),
 myExhaust,
).subscribe(finalVal => doSomething());

Voici l'exemple de travail

0 commentaires