कोणीय 4 में विंडो स्क्रॉल ईवेंट को कैसे संभालें?

Question

मैं विंडो स्क्रॉल ईवेंट को कैप्चर करने में सक्षम नहीं प्रतीत होता। कोणीय 4.2.2 में

@HostListener("window:scroll", []) 
onWindowScroll() { 
    console.log("Scrolling!"); 
} 

के टुकड़े अक्सर (अब और?) यह काम करने के लिए प्रतीत नहीं होता संस्करण 2 से आते हैं: कई साइटों पर मैं इस के समान कोड मिला। यदि मैं उदाहरण के लिए "विंडो: टचमोव" के साथ "विंडो: स्क्रॉल" को प्रतिस्थापित करता हूं, तो फिर टचमोव ईवेंट ठीक से संभाला जाता है।

क्या कोई जानता है कि मुझे क्या याद आ रहा है? आपका बहुत बहुत धन्यवाद!

Answer 1

शायद आपके document स्क्रॉल नहीं कर रहे हैं, लेकिन इसके अंदर div है। स्क्रॉल इवेंट केवल window तक बुलबुले हो जाता है अगर इसे document से बुलाया जाता है। अगर आप document से ईवेंट को कैप्चर करते हैं और stopPropagation जैसे कुछ कॉल करते हैं, तो आपको window में ईवेंट प्राप्त नहीं होगा।

आप अपने आवेदन के अंदर सभी स्क्रॉल ईवेंट, जो भी छोटे स्क्रॉल कंटेनरों से हो जाएगा कैप्चर करना चाहते हैं, तो आप true को useCapture सेट के साथ डिफ़ॉल्ट addEventListener विधि का उपयोग करने के लिए है।

यह घटना को आग लग जाएगा जब यह DOM को बबल चरण के बजाय नीचे चला जाएगा। दुर्भाग्य से, और काफी स्पष्ट रूप से एक बड़ी याद आती है, कोणीय घटना श्रोता विकल्पों में पारित करने के लिए एक विकल्प प्रदान नहीं करता है, तो आप addEventListener उपयोग करने के लिए:, अब यह सब वहाँ यह करने के लिए है नहीं है

export class WindowScrollDirective { 

    ngOnInit() { 
     window.addEventListener('scroll', this.scroll, true); //third parameter 
    } 

    ngOnDestroy() { 
     window.removeEventListener('scroll', this.scroll, true); 
    } 

    scroll =(): void => { 
     //handle your scroll here 
     //notice the 'odd' function assignment to a class field 
     //this is used to be able to remove the event listener 
    }; 

} 

क्योंकि सभी प्रमुख ब्राउज़रों (आईई और एज को छोड़कर, स्पष्ट रूप से) ने नए addEventListener spec को लागू किया है, जिससे ऑब्जेक्ट को third parameter के रूप में पास करना संभव हो जाता है।

इस ऑब्जेक्ट के साथ आप एक ईवेंट श्रोता को passive के रूप में चिह्नित कर सकते हैं। यह ऐसी घटना पर करने की एक अनुशंसा की बात है जो बहुत समय निकालती है, जो स्क्रॉल ईवेंट की तरह यूआई प्रदर्शन में हस्तक्षेप कर सकती है। इसे लागू करने के लिए, आपको पहले यह जांचना चाहिए कि वर्तमान ब्राउज़र इस सुविधा का समर्थन करता है या नहीं। Mozilla.org पर उन्होंने एक विधि passiveSupported पोस्ट की है, जिसके साथ आप ब्राउज़र समर्थन की जांच कर सकते हैं। आप केवल इसका उपयोग कर सकते हैं, जब आप सुनिश्चित हैं कि आप event.preventDefault()

इससे पहले कि मैं आपको दिखाऊं कि ऐसा करने के लिए, एक और प्रदर्शन सुविधा है जिसे आप सोच सकते हैं। चलने से परिवर्तन का पता लगाने से रोकने के लिए (DoCheck को हर बार ज़ोन के भीतर कुछ एसिंक होता है। एक घटना फायरिंग की तरह), आपको ज़ोन के बाहर अपना इवेंट श्रोता चलाया जाना चाहिए, और जब यह वास्तव में आवश्यक हो तो इसे दर्ज करें। तो, इन सभी चीजों को गठबंधन करें:

export class WindowScrollDirective { 

    private eventOptions: boolean|{capture?: boolean, passive?: boolean}; 

    constructor(private ngZone: NgZone) {} 

    ngOnInit() {    
     if (passiveSupported()) { //use the implementation on mozilla 
      this._eventOptions = { 
       capture: true, 
       passive: true 
      }; 
     } else { 
      this.eventOptions = true; 
     } 
     this.ngZone.runOutsideAngular(() => { 
      window.addEventListener('scroll', this.scroll, <any>this.eventOptions); 
     }); 
    } 

    ngOnDestroy() { 
     window.removeEventListener('scroll', this.scroll, <any>this.eventOptions); 
     //unfortunately the compiler doesn't know yet about this object, so cast to any 
    } 

    scroll =(): void => { 
     if (somethingMajorHasHappenedTimeToTellAngular) { 
      this.ngZone.run(() => { 
       this.tellAngular(); 
      }); 
     } 
    }; 
}