का पता लगाने के निर्देशों

Question

का उपयोग कर रहा कोणीय 2 में एक तत्व के बाहर क्लिक का पता लगाने के लिए एक कस्टम निर्देश का इस्तेमाल किया है, लेकिन एक ही कोणीय 4.

[plunkr]https://plnkr.co/edit/aKcZVQ?p=info

जब मैं कोशिश में संभव नहीं है कोणीय 4 में बाहर तत्व क्लिक करें कोणीय -4 में एक ही कोड का उपयोग करके मुझे निम्नलिखित त्रुटियां मिलती हैं:

1. प्रकार का तर्क '{template: string; निर्देश: टाइपऑटसाइड टाइप करें []; } 'प्रकार' घटक 'के पैरामीटर के लिए असाइन करने योग्य नहीं है। ==>

   @Component ({ templateUrl: "", निर्देशों [ClickOutside] })

2. प्रकार 'ग्राहकी' नहीं आबंटित टाइप करने के लिए 'प्रत्यक्ष' है। ngOnInit() और ngOnDestroy()

   ngOnInit() { this.globalClick = प्रत्यक्ष .fromEvent (दस्तावेज़, 'क्लिक') .delay (1) .Do (() => {अंदर निर्देश में this.listening = true; }) सदस्यता लें ((घटना: माउसइवेंट) => { यह .onGlobalClick (ईवेंट); }); }

   ngOnDestroy() { this.globalClick.uns सदस्यता लें(); }

अगर वहाँ में कोणीय 4 कृपया मुझे बताएँ निर्देश घोषणा में कोई परिवर्तन होता है सरकारी डॉक्स इस मामले में कोई मदद नहीं की है।

Answer 1

आपके plnkr के संबंध में कुछ बदलाव हैं।

1. NgModules, या फ्रेमवर्क के Archietcture पर नज़र डालें। मॉड्यूल जगह है जहाँ आप अपने घटकों, सेवाओं और directices
2. पंजीकरण करना होगा एक बार जब आप मॉड्यूल के अंदर अपने निर्देश पंजीकृत आप इसे अंदर घटकों

निर्देश ही मेरे लिए ठीक लग रहा है आयात करने के लिए नहीं है। मैंने आपके निर्देश की तुलना मेरी तुलना की है जो कोणीय 4.3.5 में ठीक काम करता है।

असल में, आपको उस मामले में किसी भी निर्देश की आवश्यकता नहीं है, जब तक कि इसे दोहराया नहीं जाए। यदि आपको केवल मेनू के लिए उस क्लिकऑटसाइड को लागू करने की आवश्यकता है तो यह बेहतर होगा:

बाइंड को अपने "अंदर" चयनकर्ता को ईवेंट पर क्लिक करें।मान लें कि यह अपने मेनू है:

<ul id="menu" (click)="clickedInside($event)"> <li> .. </li> </ul> 

तो अपने घटक के अंदर जोड़ने के इस तरह clickedInside() समारोह:

clickedInside($event: Event){ 
    $event.preventDefault(); 
    $event.stopPropagation(); // <- that will stop propagation on lower layers 
    console.log("CLICKED INSIDE, MENU WON'T HIDE"); 
    } 

और अंत में आप अपने घटक में Host Listener का उपयोग बाध्य करने के लिए कर सकते हैं दस्तावेज़

के आराम करने के भी क्लिक करें

@HostListener('document:click', ['$event']) clickedOutside($event){ 
    // here you can hide your menu 
    console.log("CLICKED OUTSIDE"); 
    }