angular - 消除@HostListener事件

我在Angular2中实现了一个简单的无限滚动指令。
我正在使用@HostListener('window:scroll')获取滚动事件并从$target解析数据。

问题是，对于每个滚动事件，都将再次检查所有内容而无需进行任何检查。

我检查了ionic infinite-scroll指令是否有灵感，但是我猜他们不使用@HostListener，它们需要更精细的控制。

我在搜索https://github.com/angular/angular/issues/13248时遇到了这个问题，但是找不到任何方法来做我想要的事情。

我认为，如果创建一个Observable，并通过去抖动对其进行订阅并将项目(下一个)推送到该Observable，我将达到我想要的行为，但是我无法做到这一点。

最佳答案

我会像这样利用去抖动方法装饰器:

export function debounce(delay: number = 300): MethodDecorator {
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const timeoutKey = Symbol();

    const original = descriptor.value;

    descriptor.value = function (...args) {
      clearTimeout(this[timeoutKey]);
      this[timeoutKey] = setTimeout(() => original.apply(this, args), delay);
    };

    return descriptor;
  };
}

并如下使用它:

@HostListener('window:scroll', ['$event'])
@debounce()
scroll(event) {
  ...
}

Ng-run Example