@HostListener और Renderer.listen के बीच कौन सा बेहतर है?

Question

मैं http://rectangleworld.com/demos/SimpleDragging/SimpleDragging के समान एक सरल कैनवास ड्रैग एन ड्रॉप एप्लिकेशन बना रहा हूं। माउसवेवेंट श्रोताओं के लिए, मैंने @ होस्टलिस्टर का उपयोग किया क्योंकि मेरे लिए यह सरल वाक्यविन्यास है और यह काम कर रहा है। Renderer.listen के साथ इसे प्राप्त करने का एक और तरीका है। लेकिन मैं इसे होस्टलिस्टर पर उपयोग करने का फैसला नहीं कर सकता। क्या कोई समझा सकता है और बता सकता है कि @HostListener और Renderer.listen के बीच कौन सा बेहतर है?

Answer 1

मेरा उत्तर शायद सबसे अच्छा नहीं हो सकता है लेकिन मुझे यह मिला है।

Renderer.listen()

यह Renderer.listen() की बात आती है जब आप Element आप पता लगाने के लिए चाहते हैं, तो Event को सुनने के लिए (click, keydown, keyup, आदि पारित करने के लिए की जरूरत है) और अंत में कॉलबैक Function

कोड में,में क्या हुआसमारोह (*):

listen(renderElement: any, name: string, callback: Function): Function { 
    return this._rootRenderer.eventManager.addEventListener(renderElement, name, decoratePreventDefault(callback)); 
} 

तो समस्या अब बस को निर्दिष्ट किया जाएगा Element (आसान), लेकिन लोगों को आम तौर elementRef.nativeElement जो एक सुरक्षा जोखिमAngular Documentation के अनुसार, तो यह प्रयोग करने से पहले सुनिश्चित हो है का उपयोग !. एक और समस्या (वास्तव में नहीं) यह है कि Renderer कक्षा प्रायोगिक है (Check its Documentation), मुझे setText() के साथ समस्या का सामना करना पड़ा, यह आरसी में काम करता था लेकिन अब यह नहीं है .. तो हाँ Renderer कार्यक्षमताओं का उपयोग करने से पहले अच्छी तरह से परीक्षण करें। aaaaaaand जब आप कर लेंगे तो आपको मैन्युअल रूप से ईवेंट को अनइंड करना होगा !, Check this answer for more।

लेकिन मैं Renderer स्थिति पर नजर रखूंगा क्योंकि इसका मुख्य उद्देश्य किसी भी पर्यावरण (वेब, नोड, मोबाइल, .etc) पर तत्वों को एक कोड आधार के साथ प्रस्तुत कर रहा है, इसलिए हाँ आशा है कि यह स्थिर हो जाए भविष्य।

@HostListener()

HostListener एक महान डेकोरेटर है और दिखाता है कि कैसे महान Angular2 टाइपप्रति साथ काम करता है, आप केवल घटना और (इसके तहत समारोह) कॉलबैक समारोह के लिए पारित करने के लिए मूल्य निर्धारित करने की आवश्यकता , और आम तौर पर लोग [$event] पास करते हैं ताकि आप फ़ंक्शन के अंदर सत्यापन पर अधिक नियंत्रण प्राप्त कर सकें और हां आपको Element सेट करने की आवश्यकता नहीं है क्योंकि यह document पर सुनता है, इसलिए यह ईवेंट में delegation कर रहा है और आप एक्सेस नहीं करते हैं DOM और आपका ऐप सुरक्षित हो जाएगा। इसके अलावा आपको घटनाओं को अनदेखा करने की आवश्यकता नहीं है, कोणीय आपके लिए यह करेगा।

Check this article for a working example

आशा है कि मेरा उत्तर मदद, कोणीय अभी भी विकसित हो रहा है तो कुछ चीजें बदल सकता है याद है।

संदर्भ:

*: Hacking Angular2: Binding Multiple DOM Events by Sean T. Larkin