@HostListener ईवेंट

Question

बहस मैं Angular2 में एक साधारण अनंत-स्क्रॉल निर्देश लागू कर रहा हूं। मैं स्क्रॉल ईवेंट प्राप्त करने और $target से डेटा को पार्स करने के लिए @HostListener('window:scroll') का उपयोग कर रहा हूं।

सवाल यह है कि, प्रत्येक स्क्रॉल ईवेंट के लिए, सब कुछ एक बार फिर से जांच की जाएगी।

मैंने प्रेरणा के लिए आयनिक infinite-scroll निर्देश की जांच की लेकिन वे @HostListener का उपयोग नहीं करते हैं, मुझे लगता है कि उन्हें अधिक बारीक नियंत्रण की आवश्यकता है।

https://github.com/angular/angular/issues/13248 खोजते समय मैं इस मुद्दे पर समाप्त हुआ लेकिन मुझे जो भी चाहिए वह करने का कोई तरीका नहीं मिला।

मुझे लगता है कि अगर मैं एक पर्यवेक्षक बनाता हूं, तो इसे डिबॉन्स और पुश (अगली) वस्तुओं के साथ सब्सक्राइब करें, मैं जो व्यवहार चाहता हूं, उस तक पहुंच जाऊंगा, लेकिन मैं ऐसा करने में सक्षम नहीं हूं।

Answer 1

मैं का लाभ उठाने की तरह debounce विधि डेकोरेटर:

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