javascript - Tap 运算符 - 为什么由其他 2 个 Observable 扩展的 Observable 触发点击 2 次而不是 1 次？

Question

来自以下代码:

const parent$ = interval(2000).pipe(
  map(x => 'parent' + x),
  tap(_ => console.log('click$'))
);

const child$ = parent$.pipe(map(x => x + ' from child 1'));
const child2$ = parent$.pipe(map(x => x + ' from child 2'));

child$.subscribe((v) => console.log(v));
child2$.subscribe((v) => console.log(v));

我期望这样的输出:

click$
parent0 from child 1
parent0 from child 2
...

相反，正确的输出是:

click$
parent0 from child 1
click$
parent0 from child 2
...

为什么 click$ 点击发出两次？

实现:https://stackblitz.com/edit/rxjs-gpxoud?devtoolsheight=60

Answer 1

您正在获得您所拥有的输出，因为它运行并为每个订阅触发 tap 副作用。

为了获得您期望的输出，您需要添加一个shareReplay

const parent$ = interval(2000).pipe(
  map(x => 'parent' + x),
  tap(_ => console.log('click$')),
  shareReplay(1)
);

这样，parent$ observable 的每个订阅者都“共享”来自 parent$ observable 的发射。那么 Tap 只被调用一次。

你可以在这里的堆栈 Blitz 中看到它:

https://stackblitz.com/edit/rxjs-rvymjx