从可观察对象中获取第一个和最后一个发出的值答案

【问题标题】：get the first and last emitted values from an observable从可观察对象中获取第一个和最后一个发出的值
【发布时间】：2018-10-12 21:47:55
【问题描述】：

有没有办法从 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$

可观察？

【问题讨论】：

标签： rxjs observable

【解决方案1】：

您可以使用 take(1) 和 takeLast(1) 运算符从 Observable 中获取第一个和最后一个值。

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);

观看现场演示：https://stackblitz.com/edit/rxjs6-demo-ymjoiy?file=index.ts

【讨论】：

【解决方案2】：

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

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); });

【讨论】：