Rxjs 从可观察对象获取第一个和最后一个发射值

有没有一种方法可以从可观察到的物体中获取第一个和最后一个发射的值

const down$ = fromEvent(this.canvas, 'mousedown');
const up$ = fromEvent(this.canvas, 'mouseup');
const move$ = fromEvent(this.canvas, 'mousemove');
const drag$ = move$.pipe(
  skipUntil(down$),
  takeUntil(up$)
);
drag$.subscribe((e: MouseEvent) => {
  console.log(e);
});

---

有没有办法从drag$observable中获取第一个和最后一个值？

您可以使用

take（1）

和

takeLast（1）

操作符从observable中获取第一个和最后一个值

const down$ = fromEvent(this.canvas, 'mousedown');
const up$ = fromEvent(this.canvas, 'mouseup');
const move$ = fromEvent(this.canvas, 'mousemove');
const drag$ = move$.pipe(
  skipUntil(down$),
  takeUntil(up$)
);
drag$.subscribe((e: MouseEvent) => {
  console.log(e);
});

drag$

import { range, merge, Subject } from 'rxjs';
import { take, takeLast, multicast } from 'rxjs/operators';

range(1, 10)
  .pipe(
    multicast(() => new Subject(), o => merge(
      o.pipe(take(1)),
      o.pipe(takeLast(1)),
    )),
  )
  .subscribe(v => console.log('result', v));

在您的情况下，看起来您可以这样做，但我不知道您的具体目标是什么：

down$
  .pipe(
    switchMap(() => move$.pipe(
      takeUntil(up$),
      multicast(() => new Subject(), o => merge(
        o.pipe(take(1)),
        o.pipe(takeLast(1)),
      )),
    )),
  )
  .subscribe(console.log);

---

请看现场演示：

对不起，我把事情弄得太复杂了。这是我的最终代码：

const up$ = fromEvent(this.canvas, 'mouseup');
const down$ = fromEvent(this.canvas, 'mousedown');
const drag$ = down$.pipe(merge(up$));
drag$.subscribe((e: MouseEvent) => console.log(e); });