如何记录 rxjs observable 和 operator 名称？

Question

我想复制时间旅行调试的可观察依赖图，类似于此示例 (https://youtu.be/HQWnCo_lMJQ?t=74)。

如何访问可观察对象和管道运算符的名称？到目前为止，初步尝试均未成功。

例如，在 this example 中，点击可以访问这些值，但我还没有找到一种方法来记录 map、take 和 interval同时.

import { interval } from 'rxjs';
import { map, take } from 'rxjs/operators';
interval(100)
  .pipe(
    take(3),
    map((e, i) => i * 2),
    tap(console.log)
  )
  .subscribe({
    next: console.log,
    error: console.error,
    complete: () => console.log('complete')
  });

Answer 1

您可以执行此操作的一种方法是创建新的运算符。比如这里是'map'

function _map(project: (value: unknown, index: number) => number) {
  return function<T>(source: Observable<T>): Observable<T> {
    return source.pipe(
      tap(() => console.log('map')),
      map(project)
    );
  };
}

看看这个例子：https://stackblitz.com/edit/j7tvss-gboupg?devtoolsheight=33&file=index.ts

结果是您正在使用 map 运算符，并且您还插入了带有运算符名称的控制台日志。

您应该查看这篇文章以了解有关创建自己的运算符的更多信息https://netbasal.com/creating-custom-operators-in-rxjs-32f052d69457

如何记录 rxjs observable 和 operator 名称？

How to log rxjs observable and operator names?

rxjs

rxjs-observables

rxjs-pipeable-operators