Question

前言我有一些不正确的程序代码希望，它传达意图。我觉得像flatMap或switchMap这样的运营商会解决这个问题;然而，我仍然没有在RXJS中实现真正的理解，如何或何时使用这些运营商。所以请耐心等待。

说明我有两个流：

var scrolling = Observable.fromEvent(target, 'scroll');正确捕获了滚动事件。
var sampleFiltered = this.sampleElementsActiveCollection，它代表当前满足规则/要求的偏移流：offset < 10 && offset > 0。例如元素距离窗口顶部10个像素。

问题： 发生滚动事件时，如何触发var sampleFiltered = this.sampleElementOffsetData上的过滤器？ （这当前没有触发。）此外，我如何清理嵌套订阅，因为它们目前只是为了传达意图而根本不工作。

import { Directive, HostListener } from '@angular/core';
import { ScrollerElementsStoreModel } from './scroller-elements-store.model';
import 'rxjs/add/operator/filter';
import {Observable} from "rxjs";
import {BehaviorSubject} from 'rxjs/Rx';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/filter';

@Directive({
  selector: '[mh-scroll]'
})
export class MhScroll {
  lastKnownScrollPosition: number;
  ticking: boolean;
  sampleElementOffsetData: BehaviorSubject<number[]>;

  constructor(private scrollElementsStore: ScrollerElementsStoreModel) {
    this.lastKnownScrollPosition = 0;
    this.ticking = false;
    this.sampleElementOffsetData = new BehaviorSubject([100,350]);
  }


    isElementCloseToTop(target) {

      var scrolling = Observable.fromEvent(target, 'scroll'); //this works


      var scrollingSub = scrolling.subscribe(
          (x) => { // this works.

            // this section below is completely wrong; 
            // however, hopefully shows intent, that when 
            // scrolling.subscribe triggers I want to run this filter.
            var sampleFiltered = this.sampleElementOffsetData.filter((x) => {
              var offset = x + this.lastKnownScrollPosition;

              // return when element offset is within 10px.
              return offset < 10 && offset > 0 
            },this);


            var sub =  sampleFiltered.subscribe(
              (y) => {
               // Update DOM.
              }
            )
          },
          (err) => {
            console.log('Error: %s', err);
          },
          () => {
            console.log('Completed');
          });

      this.ticking = false;
    }


    @HostListener('window:scroll', ['$event.target'])
    triggeredScroll(target) {
      this.lastKnownScrollPosition = window.scrollY;

      if (!this.ticking) {
        window.requestAnimationFrame(this.isElementCloseToTop.bind(this, target));
      }

      this.ticking = true;
    }
}

Answer 1

我的代码有两个问题： 1）BehaviorSubject Observable.filter中存在类型错误，只会迭代Observables而不是Observables值。

2）我能够使用运算符.mergeMap清理它 TL;DR: Map values from source to inner observable, merge output

var scrolling = Observable.fromEvent(target, 'scroll')
          .mergeMap(event => this.scrollElementsStore.elementUpdated.filter((event) => {
            var offset = event + this.lastKnownScrollPosition;
            console.log(event);
            return offset < 10 && offset > 0;
          }
        )).subscribe((x)=>{
          console.log(x, 'asdfasdf');
        })

当fromEvent（＆＃34; scroll＆＃39;）流发布时，如何触发BehaviorSubject流的过滤器？

1 个答案: