angular - RXJS - 只发出比最后一个值更大的值

Question

我想用 rxjs 为我的网站实现一个滚动监听器。 Listener 当前发出每个 scrollY 数字。如果数字高于之前WITHOUT STORING A STATEFULL PROPERTY，是否可以实现仅发出滚动位置的滚动监听器。我只想与运营商一起解决这个问题。当前的实现如下所示:

  public lastScrolledHeight: number = 0;
  ...
  public ngOnInit() {
    this.listenForScroll()
      .subscribe(scrollHeight => {
        this.showAddButton = this.lastScrolledHeight >= scrollHeight; // true or false
        this.lastScrolledHeight = scrollHeight;
      });
  }

  private listenForScroll(): Observable<number> {
    return fromEvent(window, 'scroll').pipe(
      debounceTime(25),
      map((e: any) => e.path[1].scrollY)
    );
  }

提示

一种方法已经可以添加 startsWith(0) 运算符。这会将初始位置设为 0。但是如果 scan()、filter() 或 reduce() 会有所帮助，我不知道。

用例

我向下滚动到 Y=300。应该发出 300。我向上滚动到 Y= 50。不应发出任何内容。我再次向下滚动到 150，应该发出 150。

Answer 1

您可以使用 scan运算符连同 distinctUntilChanged :

return fromEvent(window, 'scroll').pipe(
  debounceTime(25),
  map((e: any) => e.path[1].scrollY),
  scan((prev, curr) => Math.max(prev, curr), 0),
  distinctUntilChanged()
)

发生的是可观察对象被修改为包含当前和上一次迭代的最大值(并且初始值为 0)。

之后，distinctUntilChanged() 确保可观察对象不会发出重复的事件。

这确保您只会收到大于前一个值的值。