Debounce @HostListenerイベント

Question

私はAngular2で単純な無限スクロール・ディレクティブを実装しています。 私は@HostListener('window:scroll')を使用してスクロールイベントを取得し、$targetからデータを解析しています。

問題は、すべてのスクロールイベントについて、すべてが必要性なしでもう一度チェックされることです。

イオンinfinite-scrollのインスピレーションのディレクティブを確認しましたが、@HostListenerを使用していないため、もっと細かい制御が必要です。

https://github.com/angular/angular/issues/13248を検索中にこの問題が発生しましたが、私がしたいことをする方法が見つかりませんでした。

Observableを作成してdebounceでそれにサブスクライブし、（次の）アイテムをプッシュすると、私が望む振る舞いに到達しますが、私はそれを行うことができません。

Answer 1

私のようなデバウンス方法デコレータ活用します：

export function debounce(delay: number = 300): MethodDecorator { 
    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) { 
    let timeout = null 

    const original = descriptor.value; 

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

    return descriptor; 
    }; 
} 

を、次のように使用します。

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

Plunker Example