rxjs成对发出重复值

时间:2019-06-10 23:55:43

标签: angular rxjs pairwise

我正在尝试创建两个在垂直和水平滚动方向均可观察到的滚动事件。

我尝试使用pairwise()bufferCount(2,1)运算符来过滤水平滚动事件中的垂直滚动事件,但是问题是要获取prev.scrollTopcurr.scrollTop的重复值

import { Component, ViewChild, AfterViewInit, ElementRef } from '@angular/core';
import { fromEvent } from 'rxjs';
import { pairwise, tap, filter } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {

  @ViewChild('scrollable', {static: false}) scrollable: ElementRef;


  ngAfterViewInit() {

    fromEvent(this.scrollable.nativeElement, 'scroll').pipe(
      pairwise(),
      tap(([prev, curr]) => console.log(prev.target.scrollTop, curr.target.scrollTop)),
      filter(([prev, curr]) => prev.target.scrollTop !== curr.target.scrollTop),
      tap((e) => console.log(e)) // <=    Never reached
    ).subscribe();

  }

}

有什么想法吗?

stackblitz reproduction

1 个答案:

答案 0 :(得分:3)

那是因为您配对了nativeElement,它始终引用同一对象。因此,基本上,您必须string您想要的原始值。

pluck