Hostlistener等待

Question

有没有办法在 angular 2 间隔内收听自定义事件？比如每 3 秒一次？

export class scrollDirectiveComponent {
    pageNo: any = 1;
    @Input() pageNumber: any;
    @Output() emitPageNumber: EventEmitter<any> = new EventEmitter();
    @HostListener('scroll', ['$event'])
    onScroll(event) {
        console.log('scrolled', event.target.scrollTop);
        let tracker = event.target;
        let limit = tracker.scrollHeight - tracker.clientHeight - 5;
        console.log(event.target.scrollTop, limit);
        if (event.target.scrollTop > limit) {
            this.pageNumber++;
            this.emitPageNumber.emit(this.pageNumber);
        }
    }
}

一直监听滚动事件，页码自动递增。等不及了，有没有可以把滚动条换到新位置的？

Answer 1

我一理解你就可以这样做，在你发出的每个滚动事件上，你向 observable 发出，在 observable throttleTime(3000) 上，这意味着只有一个事件会通过。

export class scrollDirectiveComponent {
  pageNumber: any = 1;
  private scrollEvents = new Subject();
  constructor() {
    scrollEvents
      .throttleTime(3000)
      .subscribe(() => {
        this.emitPageNumber.emit(++this.pageNumber);
      });
  }

  @Input() pageNumber: any;
  @Output() emitPageNumber: EventEmitter<any> = new EventEmitter();
  @HostListener('scroll', ['$event'])
  onScroll(event) {
    console.log('scrolled', event.target.scrollTop);
    let tracker = event.target;
    let limit = tracker.scrollHeight - tracker.clientHeight - 5;
    console.log(event.target.scrollTop, limit);
    if (event.target.scrollTop > limit) {
      this.scrollEvents.next(true);
    }
  }
}

其他选项可能是这样的，但我不确定你是否需要尝试，因为我从未做过指令

constructor(private _el: ElementRef){
  Observable.fromEvent(_el, 'resize')
    .throttleTime(3000)
    .subscribe(() => {
      this.emitPageNumber.emit(++this.pageNumber);
    });
}

Hostlistener等待

Hostlistener wait

angular2-directives

angular