将rxjs管道封装成函数

发布于 2025-01-20 06:38:15 字数 382 浏览 1 评论 0原文

我一直在搜索，但找不到答案。

有没有办法将RXJS管道方法封装到自定义方法中？

<observable>.pipe(
filter((num: number) => num % 2 === 0),
take(10)
map((num: number) => num * 10),).subscribe(...);

我想将其简化为

<observable>.doSomeThingsThatArePiped().subscribe(...);

可自定义的可管道操作员以简化管道中的内容，但是在我的代码中，我有一组我使用的操作员多次使用，并希望尽可能多地减少它 - 包括管道。

原文

I've been searching, but cannot find an answer to this.

Is there a way to encapsulate an rxjs pipe method into a custom method?

<observable>.pipe(
filter((num: number) => num % 2 === 0),
take(10)
map((num: number) => num * 10),).subscribe(...);

I'd like to reduce it to

<observable>.doSomeThingsThatArePiped().subscribe(...);

I know about custom pipeable operators to simplify what's in the pipe, but in my code I have a set of operators that I use multiple times and would like to reduce it down as much as possible - including the pipe.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夢归不見 2025-01-27 06:38:15

function yourOperator(source: Observable<T>) {
    return source.pipe(
        filter((num: number) => num % 2 === 0),
        take(10),
        map((num: number) => num * 10)
    );
}

并像这样使用它：

observable.pipe(
  yourOperator
).subscribe(value => console.log(value));

function yourOperator(source: Observable<T>) {
    return source.pipe(
        filter((num: number) => num % 2 === 0),
        take(10),
        map((num: number) => num * 10)
    );
}

And use it like this:

observable.pipe(
  yourOperator
).subscribe(value => console.log(value));

回复收藏 0 原文

弱骨蛰伏 2025-01-27 06:38:15

您可以将通用链封装在管道之类的中：

function myCustomOperator() { // whatever parameters you need, if any
  return pipe(
    filter((num: number) => num % 2 === 0),
    take(10),
    map((num: number) => num * 10)
  )
}

然后用法很简单：

<observable>.pipe(myCustomOperator()).subscribe(...);

you can encapsulate common chains in pipe like so:

function myCustomOperator() { // whatever parameters you need, if any
  return pipe(
    filter((num: number) => num % 2 === 0),
    take(10),
    map((num: number) => num * 10)
  )
}

then usage is simple:

<observable>.pipe(myCustomOperator()).subscribe(...);

回复收藏 0 原文

你曾走过我的故事 2025-01-27 06:38:15

我的原始代码是通用的，但这是我为扩展 Observable 原型的真实项目想出的代码。

import { Observable } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

declare module 'rxjs' {
  interface Observable<T> {
      subscribeUntilDestroyed: (component: any) => Observable<T>;
  }
}

interface IDestroyNotifier {
  readonly destroyed$: Observable<boolean>;
}

function untilDestroyed(notifier: IDestroyNotifier) {
  return <T>(source: Observable<T>) => source.pipe(takeUntil(notifier.destroyed$));
}

Observable.prototype.subscribeUntilDestroyed = function (component) {
  return this.pipe(untilDestroyed(component));
};

My original code was made generic, but here's what I've come up with for my real project that extends the Observable prototype.

import { Observable } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

declare module 'rxjs' {
  interface Observable<T> {
      subscribeUntilDestroyed: (component: any) => Observable<T>;
  }
}

interface IDestroyNotifier {
  readonly destroyed$: Observable<boolean>;
}

function untilDestroyed(notifier: IDestroyNotifier) {
  return <T>(source: Observable<T>) => source.pipe(takeUntil(notifier.destroyed$));
}

Observable.prototype.subscribeUntilDestroyed = function (component) {
  return this.pipe(untilDestroyed(component));
};

回复收藏 0 原文

~没有更多了~